AngularJS: ngIf и 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,
        }
    ];
})();

angularjs angularjs-ng-repeat angularjs-ng-if
person UltraSonja    schedule 17.07.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать фильтры в своих 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>
person yvesmancera    schedule 17.07.2015
comment
Это меньше строк кода, но он по-прежнему использует две ng-repeat. - person UltraSonja; 17.07.2015
comment
Покажите мне всю свою структуру JSON, возможно, ее удастся сократить до 1 ng-repeat. - person yvesmancera; 17.07.2015