在 AngularJS 中使 ng-options 动态化答案

【问题标题】：Making ng-options dynamic in AngularJS在 AngularJS 中使 ng-options 动态化
【发布时间】：2017-05-05 11:15:30
【问题描述】：

我有一个数组如下：

$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 中做到这一点而不编写不同的选择语句块？

【问题讨论】：

'如果年龄为2，返回Pam和Ham，否则如果年龄为1，返回Sam'的逻辑是什么
你可以在下面查看我的答案

标签： javascript angularjs select ng-options

【解决方案1】：

ng-options 指令也可以解析filters，所以你可以这样做：

<select ng-options="person as person for person in people | filter:{age:age}">
</select>

见this jsfiddle

【讨论】：

这个怎么做，请看条件和我需要在ng-options中显示哪些对象

【解决方案2】：

您可以将选择绑定到函数的结果：

<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;
};

【讨论】：

【解决方案3】：

您可以将 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>

【讨论】：