Question

我有一系列ng-repeat ed ul / li集，我想在点击ul级别的链接时显示一组li。

我的代码基于这里找到的答案：https://stackoverflow.com/a/12431211表明模型变异是正确的方法。

过滤器似乎比预期的更热心，我最终没有任何结果。

如何实现此功能？

div ng-controller="DeviceController">
    <ul ng-repeat="category in devices">
        <a ng-click="setCategory(category)">{{category.name}}</a>
        <li ng-repeat="device in selected.devices | filter: isSelected(category)">
            <a href="device?id={{device.ID}}">{{device.name}}</a>
        </li>
    </ul>
</div>

function DeviceController($scope) {
    $scope.devices = [
        {name: 'Desktop',
         devices: [{id:1, name:'Olivia'},
                   {id:2, name:'Cayenne'}]
        },
        {name: 'Laptop',
         devices: [{id:3, name:'Probook'},
                   {id:4, name:'Asus G750'}]
        },
        {name: 'Tablet',
         devices: [{id:5, name:'Transformer Prime'},
                   {id:4, name:'Galaxy Note 10.1'}]
        }
    ];

    $scope.setCategory = function(category) {
        $scope.selected = category
    }

    $scope.isSelected = function(category) {
        return $scope.selected === category;
    }
}

小提琴在这里：http://jsfiddle.net/3rV6w/6/

我无法弄清楚为什么isSelected（）函数可以很好地作为活动类的一个条件（在引用的答案中），但不能像过滤器一样执行。范围也许？各种console.log建议它应该可以工作，但是..

Answer 1

我最终放弃了过滤器，而是使用了ng-hide。

<ul ng-repeat="category in devices">
    <a ng-click="setCategory(category)">{{category.name}}</a>
    <li ng-repeat="device in selected.devices" ng-hide="!isSelected(category)">
        <a href="device?id={{device.ID}}">{{device.name}}</a>
    </li>
</ul>

我认为发生的事情是ng-filter正在比较设备＆＃39;使用isSelected（类别）返回的true / false。这永远不会匹配，因此没有结果使它超过过滤器。

嵌套ng-repeat上的过度过滤

1 个答案: