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

Question

我是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;
        });

我在这里犯了什么错误？

Answer 1

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

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

这是简单的方法，不需要任何其他过滤。 过滤本身是一个繁重的过程，它会分析所有数据并去除过滤结果。 您要获得的结果-不显示项目，但不对原始数据集进行变异。

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

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":"USA" }, { "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>

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

问题描述

2 个解决方案

解决方案1
1 2016-07-21 11:16:27

解决方案2
1 已采纳 2016-07-21 23:21:06

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

问题描述

2 个解决方案

解决方案1 1 2016-07-21 11:16:27

解决方案2 1 已采纳 2016-07-21 23:21:06

解决方案1
1 2016-07-21 11:16:27

解决方案2
1 已采纳 2016-07-21 23:21:06