angularjs ng-hide ng-show或ng-if基于阵列项目的主动状态

Question

嗨，所以我正在建造一个购物车，并有3个浏览菜单，选项和订单。该列表是使用JSON数据中的NG重复构建的。数组中的每个项目作为活动字段设置为false。当将项目添加到订单中时，其值将设置为true。我想做的是当数组中没有产品活跃时，我想隐藏选项标记并在订单页面上显示"请添加项目标记"。但是我的问题是我如何进行检查并检查整个数组并使用该布尔来显示视图或"添加项目标记"

这是我的工厂功能

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

这是我要显示的/hide

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

有什么想法吗？感谢您查看

Answer 1

我希望使用过滤器在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>

Answer 2

您的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;
});