如何使用多個選擇按鈕顯示和隱藏行

Question

當我一次選擇兩個選擇按鈕時，我遇到了顯示和隱藏行的問題。

使用只有一個按鈕，我可以顯示/隱藏正確的行。 一次使用這兩個按鈕，不會顯示任何行。

代碼中的邏輯錯誤在哪裏？

請檢查：http://jsfiddle.net/xEyJZ/83/

<div ng-controller="MyCtrl"> 
    <p> 
<input type="checkbox" ng-init="showNew=false" ng-click="showNew =! showNew"><span> Show new only</span> <br> 
<input type="checkbox" ng-init="showOld=false" ng-click="showOld =! showOld"><span> Show old only </span> 
    </p> 

    <table border="1"> 
     <tr ng-repeat="person in persons" ng-class="{'newp':person.newp, 'oldp':person.oldp}" 
      ng-hide="(!person.newp && showNew) || (!person.oldp && showOld)"> 

      <td>{{ person.id }}</td> 
      <td>{{ person.name }}</td> 
      <td>{{ person.city }}</td> 
     </tr> 
    </table> 


</div> 

Answer 1

您可以在過濾器中使用比較：

ng-repeat="person in persons | filter:{newp:showNew, oldp:showOld}:showTest"

，並在控制器設置比較功能：

$scope.showTest = function(actual, expected){ 
     if(!$scope.showNew && !$scope.showOld) 
      return true; 
     return angular.equals(expected, actual); 
} 

http://jsfiddle.net/D79F7/2/

Answer 2

使用自定義過濾器：

<input type="checkbox" ng-model="showNew">..Show new only.. 
<input type="checkbox" ng-model="showOld">..Show old only.. 
..   
<tr ng-repeat="person in persons | personsFilter : showNew : showOld" ..> 

JS

myApp.filter("personsFilter",function(){ 
    return function(input, showNew, showOld){   
     if(!showNew && !showOld){ 
      return input; 
     } 
     else if(showNew && !showOld){ 
      var temp = []; 
      for(var i = 0; i < input.length; i++){ 
       if(input[i].newp && !input[i].oldp) 
        temp.push(input[i]);     
      } 
      return temp; 
     } 
     else if(showOld && !showNew){ 
      var temp = []; 
      for(var i = 0; i < input.length; i++){ 
       if(input[i].oldp && !input[i].newp) 
        temp.push(input[i]);     
      } 
      return temp; 
     } 
     else if(showOld && showNew){ 
      var temp = []; 
      for(var i = 0; i < input.length; i++){ 
       if(input[i].oldp || input[i].newp) 
        temp.push(input[i]);     
      } 
      return temp; 
     } 
    } 
}); 

Fiddle

Answer 3

你在你的布爾表達式有錯誤： 正確如下：

ng-hide="(!person.newp && showNew) || (!person.oldp && showOld)"

http://jsfiddle.net/ZWy93/2/