在 AngularJS 中使 ng-options 动态化
Making ng-options dynamic in AngularJS
我有一个数组如下:
$scope.age = 2;
$scope.people = [{name:"Sam",age:2},{name:"Pam",age:3},{name:"Ham",age:4}]
我希望 ng-options
是动态的,即
如果年龄为 2,则在 ng-options 中显示所有对象。
如果年龄为 1,则显示名称为 "Sam".
的对象
$scope.age
的值可以是 1 或 2。
如何在 AngularJS 中执行此操作而不编写不同的 select 语句块?
ng-options
指令也可以解析filters,所以你可以这样做:
<select ng-options="person as person for person in people | filter:{age:age}">
</select>
您可以将 select 绑定到函数的结果:
<select ng-options="person as person for person in getPersons()">
</select>
然后像这样设置你的示波器:
$scope.age = 2;
$scope.people = [{name:"Sam",age:2},{name:"Pam",age:3},{name:"Ham",age:4}]
$scope.getPersons = function() {
if ($scope.age = 1)
return $scope.people.filter(function(item) {
item.name == "Sam";
});
else
return $scope.people;
};
您可以使用 AngularJS filter 如下所示的自定义函数。
工作示例:(在下面的文本框中键入 1 或 2 以测试此)
var app = angular.module('app', []);
app.controller('TestController', function($scope) {
$scope.age = 2;
$scope.people = [{name:"Sam",age:2},{name:"Pam",age:3},{name:"Ham",age:4}];
$scope.filterPeople = function(person) {
return $scope.age === 2 || person.name === "Sam";
};
});
angular.bootstrap(document, ['app']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TestController">
Age: <input type="text" ng-model="age" />
<select ng-options="person as person.name for person in people | filter:filterPeople" ng-model="selected">
</select>
</div>
我有一个数组如下:
$scope.age = 2;
$scope.people = [{name:"Sam",age:2},{name:"Pam",age:3},{name:"Ham",age:4}]
我希望 ng-options
是动态的,即
如果年龄为 2,则在 ng-options 中显示所有对象。
如果年龄为 1,则显示名称为 "Sam".
$scope.age
的值可以是 1 或 2。
如何在 AngularJS 中执行此操作而不编写不同的 select 语句块?
ng-options
指令也可以解析filters,所以你可以这样做:
<select ng-options="person as person for person in people | filter:{age:age}">
</select>
您可以将 select 绑定到函数的结果:
<select ng-options="person as person for person in getPersons()">
</select>
然后像这样设置你的示波器:
$scope.age = 2;
$scope.people = [{name:"Sam",age:2},{name:"Pam",age:3},{name:"Ham",age:4}]
$scope.getPersons = function() {
if ($scope.age = 1)
return $scope.people.filter(function(item) {
item.name == "Sam";
});
else
return $scope.people;
};
您可以使用 AngularJS filter 如下所示的自定义函数。
工作示例:(在下面的文本框中键入 1 或 2 以测试此)
var app = angular.module('app', []);
app.controller('TestController', function($scope) {
$scope.age = 2;
$scope.people = [{name:"Sam",age:2},{name:"Pam",age:3},{name:"Ham",age:4}];
$scope.filterPeople = function(person) {
return $scope.age === 2 || person.name === "Sam";
};
});
angular.bootstrap(document, ['app']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TestController">
Age: <input type="text" ng-model="age" />
<select ng-options="person as person.name for person in people | filter:filterPeople" ng-model="selected">
</select>
</div>