AngularJS ng-hide ng-show或ng-if基於數組項目的活動狀態

Question

嗨，所以我正在構建一個購物車，它有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> 

有什麼想法？感謝您的期待

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