angularJS 可编辑下拉选项框
2021-06-17 02:02
标签:介绍 model set rip play max 中文 inpu 20px 功能介绍: 该组件将文本框和下拉框的组合,当你点击最右边的下拉按钮,实现下拉框选择的功能;当你选中文本框,实现文本框输入的功能。将文本框和下拉框设置name属性一样他自动会把对应下拉框的值传入后台,而文本框的值不传,当你做文本框使用,它会把文本框的值传入后台而下拉框的值不传。
angularJS 可编辑下拉选项框 标签:介绍 model set rip play max 中文 inpu 20px 原文地址:http://www.cnblogs.com/blogslee/p/7267834.html
可编辑下拉选项框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(flt1)" ng-model="flt1" ng-change="ftl1Change(flt1)" ng-focus="foc">
13 option value="">option>
14 option value="ANY">ANYoption>
15 option value="1" style="display: none;">1option>
16 select>*
17 input class="inp" maxlength="4" type="text" required="required"
18 ng-blur="chkNumber(fltNo1)" ng-model="fltNo1" ng-change="fltNo1Change(fltNo1)" />
19 font color="red"> *font>
20 span ng-model="tips"> {{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(flt1){
// console.log(flt1);
if(vm.flt1===""||vm.flt1==null){
vm.fltNo1="";
}else{
vm.fltNo1="ANY";
}
};
// 文本框输入 change事件
$scope.fltNo1Change = function(fltNo1){
vm.flt1 = fltNo1;
};
// 下拉框focus事件
vm.foChange = function(flt1){
vm.flt1 = "1";
};
// 校验是是否输入数据合法
$scope.chkNumber=function(eleText){
var value =eleText;
for(var i=0;i
上一篇:数组排序
文章标题:angularJS 可编辑下拉选项框
文章链接:http://soscw.com/index.php/essay/94825.html