angular指令笔记ng-options的使⽤⽅法
1、ng-options指令⽤途：
在表达式中使⽤数组或对象来⾃动⽣成⼀个select中的option列表。ng-options与ng-repeat很相似，很多时候可以⽤ng-repeat 来代替ng-options。但是ng-options提供了⼀些好处，例如减少内存提⾼速度，以及提供选择框的选项来让⽤户选择。当select 中⼀个选项被选择，该选项将会使⽤ng-model⾃动绑定到对应数据上。如果你想设⼀个默认值，可以像这样：
$scope.selected = $llection[3]。
1.1 track by的⽤途：
track by主要是防⽌值有重复，angularjs会报错。因为angularjs需要⼀个唯⼀值来与⽣成的dom绑定，以⽅便追踪数据。例如：items=[“a”,“a”,“b”]，这样ng-repeat=“item in items”就会出错，⽽⽤ng-repeat=“(key,value) in items track by key”就不会出现错误了。
1.2 ng-option使⽤注意
使⽤时候，必须加 ng-model 指令，否则⽆法使⽤会报错
2、select下拉框中label和value分别代表什么
先写个最简单最原始的select下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label 和 value 具体是什么</title>
</head>
angular和angularjs<body>
<select>
<!--
value 是存储到数据库中的值，label是显⽰在页⾯上的值
value 就是 1、2、3、4这些数值；
lable 是"语⽂" “数学”这些
-->
<option value="1">语⽂</option>
<option value="2">数学</option>
<option value="3">英语</option>
<option value="4">⽣物</option>
</select>
</body>
</html>
现在引⼊ angular 使⽤ ng-options 指令来⽣成⼀个下拉框，看下⽣成页⾯的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label 和 value 具体是什么</title>
<script type="text/javascript" src="../js/angular-1.3.0.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="mainCtrl">
<select>
<!--
value 是存储到数据库中的值，label是显⽰在页⾯上的值
value 就是 1、2、3、4这些数值；
lable 是"语⽂" “数学”这些
-->
<option value="1">语⽂</option>
<option value="2">数学</option>
<option value="3">英语</option>
<option value="4">⽣物</option>
</select>
<br>
<br>
<div>{{ selectedCity }}
<br>
<!-- 这⾥ c.id as c.city for c in obj 我们使⽤ obj 对象的 id作为select的value，使⽤obj 的city 作为 select 的label -->
<select ng-options="c.id as c.city for c in obj" ng-model="selectedCity">
</select>
</div>
</div>
<script type="text/javascript">
var myapp = dule('myapp', []);
$scope.selectedCity = "bj";
$scope.obj = [
{ "id": "bj", "city": "北京" },
{ "id": "sh", "city": "上海" },
{ "id": "zz", "city": "郑州" }
];
}])
</script>
</body>
</html>
看下预览的页⾯效果，在后⾯添加的使⽤ ng-options ⽣成的select中，我们使⽤ obj 对象的 id作为select的value，使⽤obj 的city 作为 select 的label
3、三种ng-options常⽤⽅法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label 和 value 具体是什么</title>
<script type="text/javascript" src="../js/angular-1.3.0.js"></script>
<style type="text/css">
.mart30 {
margin-top: 30px;
border-top: 1px solid #000;
}
</style>
</head>
<body ng-app="myapp">
<div ng-controller="mainCtrl">
<!--
value 是存储到数据库中的值，label是显⽰在页⾯上的值
value 就是 1、2、3、4这些数值；
lable 是"语⽂" “数学”这些
-->
<option value="1">语⽂</option>
<option value="2">数学</option>
<option value="3">英语</option>
<option value="4">⽣物</option>
</select>
<div class="mart30">
<h3>演⽰ label 和 value 值的变化</h3> {{ selectedCity }}
<!-- 这⾥ c.id as c.city for c in obj 我们使⽤ obj 对象的 id作为select的value，使⽤obj 的city 作为 select 的label --> <select ng-options="c.id as c.city for c in obj1" ng-model="selectedCity">
</select>
</div>
<div class="mart30">
<h3>1. “数组”实现基本下拉</h3>
<p>语法： laber for value in array</p>
<select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select>
<br>
</div>
<div class="mart30">
<h3>2. “包含对象的数组”实现“label 和 value值不同”的下拉</h3>
<p>语法： select as label for value in array</p>
<p>哪位同学你认识？你的选择是：{{selectedStu}}</p>
<select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>
<br>
<br>
<br>
<p><strong>⾃定义下拉显⽰内容格式</strong></p>
<p>哪位同学你认识？你的选择是：{{selectedStuString}}</p>
<p>语法：拼接字符串</p>
<select ng-options="c.name as (c.name +'- 英⽂名：'+c.id) for c in obj2" ng-model="selectedStuString"></select> <br>
<br>
<br>
<p><strong>使⽤group by对下拉菜单分组</strong></p>
<p>语法：label group by groupName for value in array</p>
<p>哪位同学你认识？你的选择是：{{selectedStuString2}}</p>
<select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedStuString2"></select>
</div>
<div class="mart30">
<h3>3. “对象”实现基本下拉</h3>
<p>语法 1： label for (key , value) in object</p>
<p>哪个城市？你的选择是：{{scity}}</p>
<select ng-options="key for (key , value) in obj3" ng-model="scity"></select>
<p>语法 2： select as label for (key ,value) in object</p>
<p>哪个城市？你的选择是：{{scity01}}</p>
<select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select>
</div>
</div>
<script type="text/javascript">
var myapp = dule('myapp', []);
//定义包含对象的数组 obj1
$scope.obj1 = [
{ "id": "bj", "city": "北京" },
{ "id": "sh", "city": "上海" },
{ "id": "zz", "city": "郑州" }
];
$scope.selectedCity = "bj";
/
/ 定义数组
$scope.arr1 = ["⼤⽩", "阿狸", "熊猫"];
//定义默认为 “⼤⽩”
$scope.selectedAnimal = "⼤⽩";
//定义包含对象的数组 obj2
$scope.obj2 = [
{ "id": "lilei", "name": "李雷", "sex": "man" },
{ "id": "hanmeimei", "name": "韩梅梅", "sex": "woman" },
{ "id": "jack", "name": "杰克", "sex": "man" }
];
$scope.selectedStu = "韩梅梅";
/
/定义简单对象 obj3
$scope.obj3 = {
"湖北": "鄂",
"⼴东": "粤",
"河南": "豫"
};
}])
</script>
</body>
</html>
关于对象使⽤⽅法中 key 和 value 的⼀点说明
4、ng-options 全部⽤法补充
标红部分在代码中已有例⼦，其余的请⾃⾏消化理解测试
对于数组：
label for value in array
select as label for value in array
label group by group for value in array
label disable when disable for value in array
label group by group for value in array track by trackexpr
label disable when disable for value in array track by trackexpr
label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)对于对象：
label for (key , value) in object
select as label for (key ,value) in object
label group by group for (key,value) in object
label disable when disable for (key, value) in object
select as label group by group for(key, value) in object
select as label disable when disable for (key, value) in object
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论