Angular Filter가 ng-options에서 작동하지 않습니다.

AngularJs에서 새로운 기능입니다. 세 개의 선택 상자에 ng-options이 있습니다. 필터를 추가하기 전에 정상적으로 작동했습니다.Angular Filter가 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>

번째 선택 상자는 상자 제 1 선택 값 및 세 번째는 상기 제 1 및 제 2에있어서, 작동 예상에 따라 행동 할 것으로 예상된다.

이러한 3 개의 데이터는 'UnUsedCars'개체의 배열에서 가져옵니다. 내가 여기에서 실수가 무엇

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

을 다음과 같이

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

내 JS는 다음과 같이 샘플 입력은?

출처

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

감사합니다 .. "All Locations", "All Car Types"및 "All Colors"로 작업 할 수있는 방법을 제안 해 주실 수 있습니까? –

도움이 되서 기쁘다 :) 흠 .. 데이터를 초기화했기 때문에 발생합니다. . 내가했던 것처럼 제거하면 작동합니다. – developer033

안녕하세요. 너무 효과적입니다. 다시 한 번 감사드립니다. –

귀하가 ngModel.viewModel (전달한 값)을 돌연변이하므로 filter을 피하는 것이 좋습니다.

<option>에 대해 ng-show='ctrl.isBaseStation(car)'을 작성하시는 것이 좋습니다.

추가 접근이 필요없는 간단한 접근 방식입니다. 필터링 자체는 필터링 된 결과를 제거하여 모든 데이터를 구문 분석하는 무거운 프로세스입니다. 달성하고자하는 결과 - 항목을 표시하지 않고 원래 데이터 세트를 변경하지 않으려 고합니다.

P. ng-show (숨기기/표시) 옵션을 사용하여 다시 렌더링하는 옵션은 모든 데이터 세트를 다시 계산하는 것보다 훨씬 빠릅니다.

출처

2016-07-21 11:16:27 Appeiron

Angular Filter가 ng-options에서 작동하지 않습니다.

답변

관련 문제