角度过滤器不适用于 ng-options答案

【问题标题】：Angular Filter not working on ng-options角度过滤器不适用于 ng-options
【发布时间】：2016-11-24 18:54:03
【问题描述】：

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

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

第二个选择框应根据第一个选择框的值进行操作，第三个应根据第一个和第二个值进行操作。

这 3 个选择的数据来自对象数组“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;
        });

我在这里犯了什么错误？

【问题讨论】：

标签： javascript angularjs filter ng-options angularjs-ng-options

【解决方案1】：

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

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

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

看看sn-p：

(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>

【讨论】：

谢谢兄弟..你能建议一种方法使它适用于“所有位置”、“所有汽车类型”和“所有颜色”..
很高兴有帮助 :) 嗯.. 发生这种情况是因为您正在初始化数据。像我一样删除它就可以了。

【解决方案2】：

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

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

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

附：使用ng-show（隐藏/显示）重新渲染选项比重新计算所有数据集要快得多。

【讨论】：