Угловой фильтр не работает на ng-опциях

Я новичок в AngularJs. У меня есть три окна выбора с ng-опциями. Он работал отлично, прежде чем добавлять фильтр.Угловой фильтр не работает на ng-опциях

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

Каковы ошибки, которые я сделал здесь?

источник

2016-07-21 Arjun Ajith

Во-первых, вам не нужно использовать $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>

источник

2016-07-21 23:21:06 developer033

Спасибо, братан. Можете ли вы предложить способ заставить его работать с «Все места», «Все типы автомобилей» и «Все цвета» .. –

Рад, что помогло :) Хм .. это происходит потому, что вы инициализировали данные , Просто удалите, как я, и он работает. – developer033

Эй, это сработало. Еще раз спасибо –

Я настоятельно рекомендую избегать filter, поскольку они мутируют ваш ngModel.viewModel (значение, которое вы передали).

Предлагаю вам просто написать ng-show='ctrl.isBaseStation(car)' для <option> под выбрать.

Это простой подход, который не требует дополнительной фильтрации. Сама фильтрация - это тяжелый процесс, который анализирует все ваши данные, удаляя отфильтрованные результаты. Результат, которого вы хотите достичь - не отображать элемент, но не мутировать исходный набор данных.

P.S. Параметры повторного рендеринга с использованием ng-show (скрытие/показ) намного быстрее, чем пересчет всего набора данных.

источник

2016-07-21 11:16:27 Appeiron

Угловой фильтр не работает на ng-опциях

ответ

Смежные вопросы