AngularJs中ng-options和ng-repeat的区别与用法
燕意蕴
一、使用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
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”就不会出现错误了。
注意事项：必须与ng-model搭配使用。
示例：链接：https://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ng-options-usage/
示例一：
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}
];
$scope.myColor = $scope.colors[2]; // red
}]);
</script>
<div ng-controller="ExampleController">
<ul>
<li ng-repeat="color in colors">
<label>Name: <input ng-model="color.name"></label>
<label><input type="checkbox" ng-model="color.notAnOption"> Disabled?</label>
<button ng-click="colors.splice($index, 1)" aria-label="Remove">X</button>
</li>
<li>
<button ng-click="colors.push({})">add</button>
</li>
</ul>
<hr/>
<label>Color (null not allowed):
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
</label><br/>
<label>Color (null allowed):
<span class="nullable">
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>
</span></label><br/>
<label>Color grouped by shade:
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
</select>
</label><br/>
<label>Color grouped by shade, with some disabled:
<select ng-model="myColor"
ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
</select>
</label><br/>
Select <button ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</button>.
<br/>
<hr/>
Currently selected: {{ {selected_color:myColor} }}
<div style="border:solid 1px black; height:20px"
ng-style="{'background-color':myColor.name}">
</div>
</div>示例二：
<select id="branchId" class="form-control" ng-model="vm.branchId"
ng-options="item.id as (item.branchCode+'-'+item.branchName) for item in branchList" >
<option value="">请选择经销商</option>
</select>示例三：
<select id="productCode" class="form-control selectpicker" data-live-search="true" ng-model="vm.productCode"
ng-options="item.productCode as item.productName group by item.productTypeName for item in productList track by item.id" >
<option value="">请选择产品</option>
</select>示例四：
<select id="brandName" class="form-control selectpicker" data-live-search="true" ng-model="vm.carBrandId"
ng-options="item.id as item.brandName for item in carBrandList">
<option value="">请选择品牌</option>
</select>二、ng-repeat
ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。且所有的 HTML 元素都支持该指令。
ng-repeat的使用规则：
x in records；
(key, value) in myObj；
x in records track by $id(x)。
示例：
示例一：简单案例
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"元素1",
"元素2",
"元素3",
"元素4",
]
});
</script>
</body>示例二：使用数组循环输出一个表格
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="x in records">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany"
},{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden"
},{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
</script>示例三：使用对象循环输出一个表格
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="(x, y) in myObj">
<td>{{x}}</td>
<td>{{y}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"City" : "Berlin"
}
});
</script>三、将ng-repeat与下拉框的搭配使用
使用ng-repeat循环输出<option>...</option>标签
格式：
<select>
<option value="x.id" ng-repeat="x in list" ng-bind="x.name">
</option>
</select>示例：
<select class="form-control" ng-model="tplKey">
<option value="">请选择模板</option>
<option value="{{item.tplKey}}" ng-repeat="item in smsList" ng-bind="item.tplName"></option>
<option value="custom">自定义</option>
</select>区别：
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。当select中一个选项被选择，该选项将会被绑定到ng-model。如果你想设一个默认值，可以像这样：$scope.selected = $scope.collection[3]。
四、其他用法参考相关链接
https://blog.csdn.net/weixin_35549724/article/details/82424443
类似资料：