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

Question

你好，我正在构建一个购物车，它有 3 个视图菜单、选项和订单。该列表是使用来自 json 数据的 ng-repeat 构建的。数组中的每个项目作为活动字段设置为 false。当一个项目被添加到订单时，它的值被设置为 true。我想做的是，当数组中没有产品处于活动状态时，我想隐藏选项标记并显示与订单页面相同的 "please add items markup"。但我的问题是我该如何着手检查整个数组并使用该布尔值显示视图或 "add items markup"

这是我的工厂函数

OrderFactory.checkActive = function(item){

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

}

这就是我正在尝试的 show/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 中的值。它只会记住最后一次迭代。由于您正在寻找是否有任何个活动项目，您应该在找到活动项目后立即 return。

使用你的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;
});

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

AngularJS ng-hide ng-show or ng-if based on active state of array items

angularjs

ng-show