Question

嗨所以我正在建立一个购物车，它有3个视图菜单，选项和订单。该列表使用json数据中的ng-repeat构建。数组中的每个项目作为活动字段设置为false。将项目添加到订单时，其值设置为true。我想要做的是当数组中的产品没有活动时我想隐藏选项标记并显示＆＃34;请添加项目标记＆＃34;与订单页面相同..但我的问题是我如何去检查整个数组并使用该布尔值来显示视图或＆＃34;添加项目标记＆＃34;

这是我的工厂功能

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>

任何想法？谢谢你的期待

Answer 1

我更喜欢使用过滤器在HTML本身上进行。

您的compile project(':facebookSDK') / ng-if条件为ng-show

<强>标记

ng-if="(menu | filter : {active: true}).length == 0"

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

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

2 个答案: