AngularJS ng-hide ng-show или ng-if на основе активного состояния элементов массива

Привет, я создаю корзину для покупок, и у нее есть 3 вида меню, вариантов и порядка. Список строится с помощью ng-repeat из данных json. каждый элемент массива в качестве активного поля имеет значение false. когда элемент добавляется в заказ, его значение устанавливается равным true. то, что я хотел бы сделать, это когда ни один продукт в массиве не активен, я хотел бы скрыть разметку опции и показать «пожалуйста, добавьте разметку элементов» так же, как и на странице заказа. но мои вопросы в том, как мне это сделать и проверить весь массив и использование этого логического значения для отображения представления или «разметки добавления элементов»

вот моя заводская функция

OrderFactory.checkActive = function(item){

    angular.forEach(item, function(item){
        if (item.active){
            $scope.show = false;
        } else {
            $scope.show = true;
        }
    });

}

вот что я пытаюсь показать/скрыть

<md-card ng-show="!show">
<md-card-content>
  <h1>Please add items</h1>
</md-card-content>
<md-card>

<md-card ng-show="show">
<md-card-content>
    <h3 class="md-subhead" align="center">Review And Submit Order</h3>
    <md-divider></md-divider>
    <md-list ng-repeat="item in menu | filter:true">
        <md-list-item layout="row">
            <h3>{{ item.name }} Qty:{{item.qty}}</h3>
            <span flex></span>
            <h3>{{ item.price | currency }}</h3>
        </md-list-item>
        <md-list-item layout="row" ng-repeat="size in item.sizes | filter:true">
            <span>{{ size.name }}</span>
            <span flex></span>
            <span>{{ size.price | currency }}</span>
        </md-list-item>
        <md-list-item layout="row" ng-repeat="flavor in item.flavors | filter:true">
            <span>{{ flavor.name }}</span>
            <span flex></span>
            <span>{{ flavor.price | currency }}</span>
        </md-list-item>
    </md-list>
    <md-divider></md-divider>
    <md-list>
        <md-list-item layout="row">
            <h3 class="md-subhead">Order Total:</h3>
            <span flex></span>
            <h3>{{ total(menu) | currency }}</h3>
        </md-list-item>
    </md-list>
</md-card-content>
</md-card>

Любые идеи? спасибо за просмотр


angularjs ng-show
person Chris G    schedule 01.05.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я бы предпочел сделать это на самом HTML, используя фильтр.

Вашеng-if/ng-show состояние будет ng-if="(menu | filter : {active: true}).length == 0"

Разметка

<md-card ng-if="(menu | filter : {active: true}).length == 0">
<md-card-content>
  <h1>Please add items</h1>
</md-card-content>
<md-card>

<md-card ng-if="(menu | filter : {active: true}).length > 0">
<md-card-content>
   ..content here
</md-card-content>
</md-card>
person Pankaj Parkar    schedule 01.05.2015
comment
Я выбираю этот ответ, но оба ответа работают правильно .. спасибо - person Chris G; 01.05.2015
comment
@ChrisG Рад помочь вам, спасибо :-) - person Pankaj Parkar; 01.05.2015
comment
Здорово, что было два решения одной и той же проблемы. Мне лично нравится это решение, поскольку оно перемещает логику в то самое место, где она используется прямо сейчас. Так меньше беспорядка. - person ryanyuyu; 01.05.2015

arrow_upward
2
arrow_downward

Ваш код foreach перезаписывает значение, хранящееся в $scope.show. Он будет помнить только последнюю итерацию. Поскольку вы ищете, есть ли какие-либо активные элементы, вы должны вернуться, как только найдете активный элемент.

Используя ваш foreach:

OrderFactory.checkActive = function(item){
    $scope.show = true; //default to true
    angular.forEach(item, function(item){
        if (item.active){  //only change value if found an active item
            $scope.show = false;
            break;
        } 
    });
}

Кроме того, вы можете использовать Array.some(predicate) для посмотрите, есть ли какие-либо активные элементы.

$scope.show = !itemArray.some(function(item) {
    return item.active;
});
person ryanyuyu    schedule 01.05.2015
comment
о, я вижу ... оба ответа работают хорошо, но мне немного больше нравится html-версия ... спасибо за отличный ответ - person Chris G; 01.05.2015
comment
Да, это определенно более элегантно. Рад помочь. - person ryanyuyu; 01.05.2015
comment
@ryanyuyu, которую ты ловишь, тоже было приятно. - person Pankaj Parkar; 01.05.2015