AngularJS ng hide ng show或ng if基于数组项的活动状态

嗨，所以我正在建立一个购物车，它有3个视图菜单，选项和订单。该列表是使用来自json数据的ng repeat构建的。数组中的每个项作为活动字段设置为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>

---

有什么想法吗？感谢您的关注

我更愿意使用过滤器在HTML本身上完成它

Yourng if/ng show条件将是ng if=menu | filter:{active:true}。length==0

加价

---

我更喜欢使用过滤器在HTML本身上实现它

Yourng if/ng show条件将是ng if=menu | filter:{active:true}。length==0

加价

---

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

或者，您可以使用查看是否有任何活动项

$scope.show = !itemArray.some(function(item) {
    return item.active;
});

---

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

或者，您可以使用查看是否有任何活动项

$scope.show = !itemArray.some(function(item) {
    return item.active;
});

---

我选择这个答案，但两个答案都正确。。感谢you@ChrisG很高兴为您提供帮助，谢谢：-对于同一个问题，有两种解决方案真是太好了。我个人非常喜欢这个解决方案，因为它将逻辑移到了现在正在使用的地方。这样可以减少混乱。我选择这个答案，但两个答案都正确。。感谢you@ChrisG很高兴为您提供帮助，谢谢：-对于同一个问题，有两种解决方案真是太好了。我个人非常喜欢这个解决方案，因为它将逻辑移到了现在正在使用的地方。这样可以减少混乱。哦，我明白了。。。两个答案都很好，但我确实更喜欢html版本。。。谢谢你的回答是的，肯定更优雅了。很高兴能帮上忙。@ryanyuyu你抓到的也很好..特别像'Array.somepredicate'部分..太棒了..+1哦，我明白了。。。两个答案都很好，但我确实更喜欢html版本。。。谢谢你的回答是的，肯定更优雅了。很高兴能帮上忙。@ryanyuyu你抓到的也很好..特别像'Array.somepredicate'部分..太棒了..+1