Angular 过滤器不适用于 ng-options

Question

我是 AngularJs 的新人。我有三个带有 ng-options 的 Select 框。在添加过滤器之前它工作正常。

<td style="33%">
    <select ng-options="car.BaseStation for car in UnUsedCars | orderBy:'BaseStation'" ng-model="selected.BaseStation">
        <option value="">All Locations</option>
    </select>
</td>
<td style="33%">
    <select ng-options="car.CarType for car in UnUsedCars | filter: selected.BaseStation | orderBy:'CarType'" ng-model="selected.CarType">
        <option value="">All Car Types</option>
    </select>
</td>
<td style="33%">
    <select ng-options="car.Color for car in UnUsedCars | filter: selected.BaseStation | filter: selected.CarType | orderBy:'Color'" ng-model="selected.Color">
        <option value="">All Car Colors</option>
    </select>
</td>

第二个 Select 框应根据第一个 select 框值运行，第三个框应根据第一个和第二个框值运行。

这 3 个 select 的数据来自一个对象数组 'UnUsedCars'。输入示例如下：

[{
    "CarType" : "Audi",
    "Color" : "White",
    "BaseStation" : "Canada"
},
{
    "CarType" : "BMW",
    "Color" : "White",
    "BaseStation" : "U.S.A"
},
{
    "CarType" : "Benz",
    "Color" : "Black",
    "BaseStation" : "Canada"
}]

我的JS如下

       scope.selected = {
            BaseStation: null,
            CarType: null,
            Color: null
        };

        scope.$watch('selected.BaseStation', function() {
            scope.selected.CarType = null;
        });

        scope.$watch('selected.BaseStation', 'selected.CarType', function() {
            scope.selected.Color = null;
        });

我在这里犯了哪些错误？

Answer 1

我强烈建议您避免使用 filter，因为它们会改变您的 ngModel.viewModel（您传递的值）。

我建议您只在 select 下为 <option> 写 ng-show='ctrl.isBaseStation(car)'。

这是一种简单的方法，不需要任何额外的过滤。过滤本身是一个繁重的过程，它通过剥离过滤结果来解析所有数据。您想要达到的结果 - 不显示项目，但不改变原始数据集。

P.S。使用 ng-show (hiding/showing) 重新呈现选项比重新计算所有数据集要快得多。

Answer 2

首先，您不需要使用 $watch 或类似的东西。

好吧，实际上您的 ngModel 正在从每个 <select> 接收一个对象，但是由于您只想获得属性，您应该使用 as 语法，如下：

<select ng-options="car.BaseStation as car.BaseStation for car in UnUsedCars | orderBy: 'BaseStation'" ng-model="selected.BaseStation">

查看片段:

(function() {
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl($scope) {
    $scope.UnUsedCars = [  
       {  
          "CarType":"Audi",
          "Color":"White",
          "BaseStation":"Canada"
       },
       {  
          "CarType":"BMW",
          "Color":"White",
          "BaseStation":"U.S.A"
       },
       {  
          "CarType":"Benz",
          "Color":"Black",
          "BaseStation":"Canada"
       }
    ];
  }
})();

<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <table>
    <tr>
      <td style="33%">
        <select ng-options="car.BaseStation as car.BaseStation for car in UnUsedCars | orderBy: 'BaseStation'" ng-model="selected.BaseStation">
          <option value="">All Locations</option>
        </select>
      </td>
      <td style="33%">
        <select ng-options="car.CarType as car.CarType for car in UnUsedCars | filter: selected.BaseStation | orderBy: 'CarType'" ng-model="selected.CarType">
          <option value="">All Car Types</option>
        </select>
      </td>
      <td style="33%">
        <select ng-options="car.Color as car.Color for car in UnUsedCars | filter: selected.BaseStation | filter: selected.CarType | orderBy: 'Color'" ng-model="selected.Color">
          <option value="">All Car Colors</option>
        </select>
      </td>
    </tr>
  </table>
</body>

</html>

Angular 过滤器不适用于 ng-options

Angular Filter not working on ng-options

javascript

filter

angularjs

ng-options

angularjs-ng-options