Winkelfilter arbeitet nicht an ng-Optionen

Ich bin neu in AngularJs. Ich habe drei Select-Boxen mit ng-Optionen. Es funktionierte gut, bevor Filter hinzugefügt wurden.Winkelfilter arbeitet nicht an ng-Optionen

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

das zweite Auswahlfeld einwirken sollte gemäß dem ersten Auswahlfeld Wert und dritte gemäß den ersten und zweiten arbeiten erwartet.

Die Daten für diese 3 Auswahl stammen aus einem Array von Objekten 'UnUsedCars'. Eine Probe Eingang ist wie folgt:

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

Mein JS ist als

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

folgt Was sind die Fehler, die ich hier gemacht?

Quelle

2016-07-21 Arjun Ajith

Zuerst müssen Sie $watch oder etwas ähnliches nicht verwenden.

Nun, eigentlich Ihre ngModel ist ein Objekt von jedem <select> empfangen, aber da Sie nur die Eigenschaft erhalten möchten, sollten Sie die as Syntax verwenden, wie unten:

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

Werfen Sie einen Blick auf die Schnipsel:

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

Quelle

2016-07-21 23:21:06 developer033

Danke bro .. Kannst du bitte einen Weg vorschlagen, damit es funktioniert mit "All Locations", "All Car Types" und "All Colors" .. –

Gut, das hat geholfen :) Hmm .. es passiert, weil du die Daten initialisiert hast . Einfach entfernen, wie ich es getan habe und es funktioniert. – developer033

Hey, das hat auch funktioniert .. Danke nochmal –

Ich empfehle Ihnen dringend zu vermeiden filter, wie sie Ihre ngModel.viewModel mutieren (Wert, den Sie bestanden).

Ich schlage vor, Sie nur ng-show='ctrl.isBaseStation(car)' für <option> unter Select schreiben.

Es ist ein einfacher Ansatz, der keine zusätzliche Filterung erfordert. Das Filtern selbst ist ein schwerer Prozess, bei dem alle Ihre Daten analysiert werden und gefilterte Ergebnisse entfernt werden. Das Ergebnis, das Sie erreichen möchten - um das Element nicht anzuzeigen, aber den ursprünglichen Datensatz nicht zu verändern.

P.S. Das erneute Rendern von Optionen mit ng-show (Verbergen/Anzeigen) ist viel schneller als die Neuberechnung all Ihrer Daten.

Quelle

2016-07-21 11:16:27 Appeiron

Winkelfilter arbeitet nicht an ng-Optionen

Antwort

Verwandte Themen