Question

当我一次选择两个选择按钮时，我在显示和隐藏行时遇到问题。

只使用一个按钮，我可以显示/隐藏正确的行。一次使用两个按钮，将不会显示任何行。

代码中的逻辑错误在哪里？

<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

使用自定义过滤器：

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

布尔表达式中有错误：正确如下：

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

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

Answer 3

您可以在过滤器中使用比较器：

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/

如何使用多个选择按钮显示和隐藏行

3 个答案: