Wie filtert man Daten in AngularJS so?

Okay, ich kann wirklich nicht den richtigen Begriff finden, um das zu beschreiben. Grundsätzlich habe ich eine Auswahlsteuerung und ein div mit ng-repeatWie filtert man Daten in AngularJS so?

<select ng-model="selectedCode" > 
    <option value="">ALL</option> 
    <option value="A">Option A</option> 
    <option value="B">Option B</option> 
    <option value="C">Option C</option> 
</select> 
<select ng-model="selectedName" > 
    <option value="">ALL</option> 
    <option value="John">John</option> 
    <option value="Peter">Peter</option> 
</select> 


<div ng-repeat="item in myList" ng-if="item.code==selectedCode && item.Name==selectedName" > 
<!--show some data--> 
</div>

Dieser Code irgendwie funktioniert, aber ich habe keine Ahnung, wie das alles zeigen, wenn das ausgewählte Element ist „ALL“.

Quelle

2016-04-21 doms

ng-if = '(item.code == ausgewählterCode && item.Name == selectedName) '|| selectedCode == "" ''. benutze OR condion, um ng-if zu machen, wenn true zurückgegeben werden soll, wenn du 'All' wählst –

Es hat funktioniert !!! Vielen Dank! – doms

Dieser Ausdruck zeigt alle Elemente mit dem ausgewählten Code oder Namen an, wenn die andere Auswahl auf "ALL" gesetzt ist. Es werden auch alle Einträge angezeigt, wenn beide Kontrollkästchen auf "ALL" gesetzt sind. Und es werden nur die übereinstimmenden Elemente mit dem entsprechenden Namen und Code angezeigt, wenn keines der Auswahlfelder auf "ALL" gesetzt wurde.

ng-if="(selectedCode==item.code || selectedCode=='') && 
     (selectedName==item.name || selectedName=='')">

Wert vorzuwählen, so dass die ng-wenn direkt nach dem Laden der Seite angewendet wird, kann eine ng-init Expression zum Einstellen eines Standardwert, wie so hinzufügen.

ng-init="selectedCode=''" 
ng-init="selectedName='John'"

dies alles in einen Kontext zu setzen, ist hier ein Beispiel, eine Tabelle mit ng-Wiederholung und die beiden Auswahlbox zur Nutzung des ng-wenn Expression zeigt. Der Code "" und der Name "John" sind vorgewählt und ich habe den JavaScript-Block hinzugefügt.

<!DOCTYPE HTML> 
<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    </head> 

    <body> 
    <div ng-app="ngApp"> 
     <select ng-model="selectedCode" ng-init="selectedCode=''"> 
     <option value="">ALL</option> 
     <option value="A">Option A</option> 
     <option value="B">Option B</option> 
     <option value="C">Option C</option> 
     </select> 

     <select ng-model="selectedName" ng-init="selectedName='John'"> 
     <option value="">ALL</option> 
     <option value="John" selected="selected">John</option> 
     <option value="Peter">Peter</option> 
     </select> 

     <div ng-controller="ngController"> 
     <table> 
      <tr> 
      <th>Code</th> 
      <th>Name</th> 
      </tr> 
      <tr ng-repeat="item in myList" ng-if="(selectedCode==item.code || selectedCode=='') && (selectedName==item.name || selectedName=='')"> 
      <td>{{item.code}}</td> 
      <td>{{item.name}}</td> 
      </tr> 
     </table> 
     </div> 
    </div> 

    <script> 
     angular.module('ngApp', []) 
     .controller('ngController', function($scope) { 
      $scope.myList = [ {code:'A', name:'John'}, {code:'B', name:'Peter'}, {code:'C', name:'Peter'} ]; 
     }); 
    </script> 
    </body> 
</html>

Quelle

2016-04-21 08:45:33 user2154065

Antwort

Verwandte Themen