如何像這樣過濾AngularJS中的數據？

好吧，我真的找不到合適的詞/詞來描述這一點。基本上，我有一個選擇控制和ng-repeat如何像這樣過濾AngularJS中的數據？

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

一個div該代碼有點兒工作，但我不知道如何將所有顯示，如果選擇的項目是「ALL」。

來源

2016-04-21 doms

NG-如果='（item.code == selectedCode && item.Name == selectedName）'|| selectedCode ==「」''。使用OR condion使ng-if應該返回true，如果你選擇'All' –

它工作！謝謝！ – doms

如果另一個選擇設置爲「ALL」，則此表達式將顯示帶有所選代碼或名稱的所有項目。如果兩個選擇框都設置爲「ALL」，它也會顯示所有項目。如果沒有選擇框被設置爲「全部」，它將只顯示具有相應名稱和代碼的匹配項目。

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

要預選的值，所以NG，如果得到頁面加載後直接應用，你可以加一個NG-初始化表達式設置的默認值，像這樣。

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

把這一切變成一個背景下，這裏有一個例子，顯示了NG-重複一張桌子和利用NG-如果表達兩個選擇框。代碼「」和名稱「John」已經預先選好，我添加了JavaScript代碼塊。

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

來源

2016-04-21 08:45:33 user2154065

如何像這樣過濾AngularJS中的數據？

回答

相關問題