Question

我正在使用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,
        }
    ];
})();

Answer 1

您可以在ng-repeats中使用过滤器并删除ng-ifs：

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

AngularJS：ngIf和ngRepeat

1 个答案: