angular.js 使用 ng-options 仅显示唯一值

JS

使用Angular.JS的ng-options指令可以方便地创建下拉选项框，并根据需要筛选并仅显示唯一值。这对于需要从一组数据中选择独特值的场景非常有用。

在Angular.JS中，ng-options指令可以与select元素一起使用，以动态生成下拉选项框。它接受一个数组作为输入，然后通过特定的过滤器和表达式来确定显示在下拉选项框中的唯一值。

下面是一个简单的例子，演示了如何使用ng-options仅显示唯一值：

html
<select ng-model="selectedValue" ng-options="item for item in data | unique">
</select>

在这个例子中，我们使用了一个数组data作为输入数据。通过在ng-options指令中使用过滤器"unique"，我们可以确保只有唯一的值会显示在下拉选项框中。

为了使过滤器"unique"生效，我们需要在Angular.JS应用程序的模块中定义一个自定义过滤器。下面是一个简单的例子，展示了如何创建一个名为"unique"的自定义过滤器：

Javascript
angular.module('myApp', []).filter('unique', function() {
  return function(input) {
    if (input) {
      var uniqueValues = [];
      angular.forEach(input, function(item) {
        if (uniqueValues.indexOf(item) === -1) {
          uniqueValues.push(item);
        }
      });
      return uniqueValues;
    }
    return input;
  };
});

在这个例子中，我们定义了一个名为"unique"的过滤器函数，它接受一个输入数组作为参数。在函数内部，我们使用angular.forEach循环遍历输入数组，并使用indexOf方法来判断当前值是否已经存在于一个新的数组uniqueValues中。如果不存在，我们将其添加到uniqueValues数组中。最后，我们返回这个新的数组，作为过滤器的输出结果。

案例代码

下面是一个完整的示例代码，演示了如何使用ng-options仅显示唯一值的下拉选项框：

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
  <script>
    angular.module('myApp', []).filter('unique', function() {
      return function(input) {
        if (input) {
          var uniqueValues = [];
          angular.forEach(input, function(item) {
            if (uniqueValues.indexOf(item) === -1) {
              uniqueValues.push(item);
            }
          });
          return uniqueValues;
        }
        return input;
      };
    });
  </script>
</head>
<body>
  <div ng-controller="myController">
    <select ng-model="selectedValue" ng-options="item for item in data | unique">
    </select>
    
选中的值: {{selectedValue}}
  </div>
  <script>
    angular.module('myApp').controller('myController', ['$scope', function($scope) {
      $scope.data = ['Apple', 'Banana', 'Orange', 'Apple', 'Grape', 'Banana'];
    }]);
  </script>
</body>
</html>

在这个例子中，我们在ng-app属性中定义了一个名为"myApp"的Angular.JS应用程序。然后，我们在ng-controller指令中定义了一个名为"myController"的控制器，它将数据数组"data"绑定到$scope对象上。

在HTML部分，我们使用ng-options指令来创建一个下拉选项框，并将数据数组"data"作为输入。通过使用过滤器"unique"，我们确保只有唯一的值会显示在下拉选项框中。我们还使用ng-model指令将选中的值与$scope对象中的"selectedValue"属性进行双向绑定。

最后，我们在页面上输出选中的值，以验证代码的正确性。

使用Angular.JS的ng-options指令可以方便地创建下拉选项框，并根据需要筛选并仅显示唯一值。通过定义一个自定义过滤器，我们可以轻松地实现这个功能。以上示例代码演示了如何使用ng-options仅显示唯一值的下拉选项框，并提供了一个简单的自定义过滤器的实现。