您的位置：首页 > 运维架构

ng-option指令使用记录，设置默认值需要注意

2016-11-21 19:33 531 查看
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

使用事例如下：select element

<select ng-model="myColor1" ng-options="color.name as color.name for color in colors"></select>


这是ng-options表达式的基本形式，形如"<标签>" for <项目> in <数组or对象>这样的形式，angularjs会为数组中的每一个对象生成一个option元素，并且将其值设置到标签中去。

选择一个列表时ng-model的值会指向select元素的当前选中项的value值.

对于这个select元素会生成如下的HTML：

<select ng-model="myColor1" ng-options="color.name as color.name for color in colors" class="ng-valid ng-dirty ng-valid-parse ng-touched">
　　<option value="0" label="black">black</option>
　　<option value="1" label="white">white</option>
　　<option value="2" label="red">red</option>
　　<option value="3" label="blue">blue</option>
　　<option value="4" selected="selected" label="yellow">yellow</option>
</select>


<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select{width: 80px;}
</style>
</head>
<body ng-controller="myCtrl">
<select ng-model="val" ng-options="item.label  for item in arr | orderBy:'id' track by item.id"></select>
</body>
<script src="angular.js"></script>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.arr=[
{id:4,label:31},
{id:3,label:22},
{id:1,label:11},
{id:5,label:41},
{id:2,label:21}
];
$scope.val = $scope.arr[0];//设置默认值
})
</script>
</html>


View Code

总结

接触一个指令学习一个指令，如何设置默认值需要注意，顺手总结在这里，也是一种学习。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航