angularJS 可编辑下拉选项框

1.html代码

 1 !DOCTYPE html
 2 html ng-app="myapp"
 3     head
 4         meta charset="UTF-8"
 5         title可编辑下拉选项框/title
 6         script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"/script
 7         script src="../js/edit_sel.js" type="text/javascript" charset="utf-8"/script
 8         link rel="stylesheet" type="text/css" href="edit_sel.css"/
 9     /head
10     
11     body ng-controller="mycon"
12         select class="sel" name="search" ng-focus="foChange(f< 1)" ng-model="f< 1" ng-change="ftl1Change(f< 1)" ng-focus="foc"
13             option  value=""/option
14             option  value="ANY"ANY/option
15             option  value="1" style="display: none;"1/option
16         /select*
17         input class="inp" maxlen >h="4" type="text" required="required" 
18             ng-blur="chkNumber(f< No1)" ng-model="f< No1" ng-change="f< No1Change(f< No1)" /
19             font color="red"nbsp;*/font
20             span ng-model="tips"nbsp;{{tips}}/span
21     /body
22 /html

2.css样式引入

 1 .sel{
 2     width: 1.5%;
 3     position: relative;
 4     left: 11.5%;
 5     height:21px;
 6 }
 7 
 8 .inp{
 9     width: 10%;
10     position: relative;
11     left: -20px;
12 }

3.可编辑文本框下拉选项的js代码实现

angular.module("myapp",[]).controller("mycon",function($scope){
    var vm = $scope;
    // 下拉框change事件
    $scope.ftl1Change= function(f< 1){
//        console.log(f< 1);
        if(vm.f< 1===""||vm.f< 1==null){
            vm.f< No1="";
        }else{
            vm.f< No1="ANY";
        }
        
    };
    
    // 文本框输入 change事件
    $scope.f< No1Change = function(f< No1){
        vm.f< 1 = f< No1;
    };
    
    // 下拉框focus事件
    vm.foChange = function(f< 1){
        vm.f< 1 = "1";
    };
    
    // 校验是是否输入数据合法
    $scope.chkNumber=function(eleText){
         var value =eleText;
              for(var i=0;ivalue.len >h;i++)  
              {
                     if(value.charAt(i)"9"|| value.charAt(i)"0")
                     {
                            vm.tips="输入非法字符!";
                            eleText.focus();
                            break;
                     }
              }
    };
});

/*
// html 原生的onblur事件校验
   input type="text"onblur=" chkNumber(this)"/     
 function chkNumber(eleText)
 
       {
              var value =eleText.value;
              var len =value.len >h;
              for(var i=0;ilen;i++) 
              {
                     if(value.charAt(i)"9"|| value.charAt(i)"0")
                     {
                            alert("含有非数字字符");
                            eleText.focus();
                            break;
                     }
              }
       }
       
*/

angularJS 可编辑下拉选项框

原文地址:http://www.cnblogs.com/blogslee/p/7267834.html


最新回复(0)
/jishuehLJlh_2BuNNwsbjYDcp_2FihxFPyZ3Yp0HFh_2B8zO_2BtvluA_3D4719285
8 简首页