1.ng-repeat和ng-options的区别
ng-repeat 循环的是数组，ng-options 可以是对象和数组；
ng-options 有分组和排序功能；
举栗子：
1. ng-repeat ：
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
</body>2. ng-options：
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
</body>3. ng-options 分组
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="colorChosen" ng-options="color.name group by color.type for color in colors">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.colors = [
{name: '黑色', color: 'black', type: "暗色"},
{name: '白色', color: 'white', type: "亮色"},
{name: '红色', color: 'red', type: "暗色"},
{name: '蓝色', color: 'blue', type: "暗色"},
{name: '黄色', color: 'yellow', type: "亮色"}
];
});
</script>
</body>4. ng-options 排序
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="colorChosen" ng-options="color.name group by color.type for color in colors | orderBy:'name' ">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.colors = [
{name: '黑色', color: 'black', type: "暗色"},
{name: '白色', color: 'white', type: "亮色"},
{name: '红色', color: 'red', type: "暗色"},
{name: '蓝色', color: 'blue', type: "暗色"},
{name: '黄色', color: 'yellow', type: "亮色"}
];
});
</script>
</body>5. ng-options 禁用
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="colorChosen"
ng-options="color.name group by color.type
disable when color.disabled for color in colors"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.colors = [
{name: '黑色', color: 'black', type: "暗色"},
{name: '白色', color: 'white', type: "亮色", disabled: false},
{name: '红色', color: 'red', type: "暗色", disabled: true},
{name: '蓝色', color: 'blue', type: "暗色", disabled: false},
{name: '黄色', color: 'yellow', type: "亮色", disabled: true}
];
});
</script>
</body>
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
