AngularJS: ngIf and ngRepeat

我使用ngRepeat和ngIf来过滤/排序(?)一些数据。我原本考虑使用ngSwitch来代替ngIf，但找不到一个好的例子。在摸索了稍微复杂一点的ngSwitch之后，我决定试试ngIf。只花了大约5分钟就弄清楚如何用ngIf实现我想要的东西，所以这是一个很大的优势!然而，我需要使用ngRepeat和ngIf两次来实现我想要的输出。如果可能的话，我想把它减少到一个ngRepeat，因为我认为这是更昂贵的指令。

主html如下:

<body ng-app="app">
    <div ng-controller="Controller2 as ctrl2">
        <h4>City1</h4>
        <div ng-repeat="place in ctrl2.places">
            <div ng-if="place.city1 === true">
                {{place.name}}
            </div>
        </div>
        <h4>City2</h4>
        <div ng-repeat="place in ctrl2.places">
            <div ng-if="place.city1 === false">
                {{place.name}}
            </div>
        </div>
    </div>
</body>

输出如下:

City1
Place1
Place3
City2
Place2

您可以看到，我对places变量的每个元素都使用了布尔属性。如果需要，我可以提供更多的代码。

是否有一种方法可以在不使用两个ng-repeat指令的情况下获得所需的输出?ngSwitch会比ngIf更好吗?

编辑:

控制器代码:

(function() {
    'use strict';
    angular
        .module('app')
        .controller('Controller2', Controller2);
    function Controller2() {
        this.places = places;
    }
    var places = [
        {
            name: 'Place1',
            city1: true,
        },
        {
            name: 'Place2',
            city1: false,
        },
        {
            name: 'Place3',
            city1: true,
        }
    ];
})();

你可以在你的ng-repeat中使用过滤器，去掉ng-if:

<div ng-controller="Controller2 as ctrl2">
    <h4>City1</h4>
    <div ng-repeat="place in ctrl2.places | filter: {city1: true}">        
        {{place.name}}
    </div>
    <h4>City2</h4>
    <div ng-repeat="place in ctrl2.places | filter: {city1: false}">        
        {{place.name}}        
    </div>
</div>

相关内容

最新更新

热门标签：