2016-06-29 17 views
0

私は以下の要素を持っています。オブジェクトの配列内の条件に基づいた角度の表示要素

<div> My element</div> 

、以下の目的:

$scope.myObject = {'life_log' : [{status: 'ALIVE'},{status: 'DEAD'}]} 

どのように私はすべてのステータスがALIVEされている場合にのみ、要素を表示することができます。

私は変数にng-showを使用する方法を知っていますが、このような状態はどうですか?

+0

をmyObject.life_logの使い方に応じて別の方法がありますか? ng-repeatでは、コレクション内のすべてのオブジェクトを繰り返し処理しますか?他の方法ですか? – jbrown

答えて

2

配列をループし、すべてのステータスが「ALIVE」であるかどうかをチェックする関数を作成する必要があります。それとも、アレイ上の削減方法を使用します。

$scope.allStatusesAreAlive = $scope.myObject.life_log.reduce(function(a, b) { 
    if (a === false) return false; 
    if (b.status === 'DEAD') return false; 
    return true; 
}, true); 

$ scope.allStatusesAreAliveがtrueの場合、その後、あなたの要素を表示することができます。

<div ng-if="allStatusesAreAlive"> My element</div> 
+0

素晴らしいです。私は関数を使用しようとしましたが、myobjectは常に空です。ビューは以前に構築されているので、私は推測しています。どうすれば修正できますか? – KingKongFrog

+0

myObjectのデータを取得するAJAXリクエストを作成している場合、ビューを更新するにはangleを指定する必要があります。 $ timeout(ビューを再表示するダイジェストサイクルをトリガーする$ timeoutの中にコードを置くことでこれを行うことができます。$ timeoutはダイジェストサイクルをトリガーする$ rootScope。$ digestを呼び出します)。あなたのコントローラに$ timeoutサービスを注入し、この$ timeout(function(){ここでmyObjectを更新}のように使用する必要があります)。 –

+1

また、 'ALIVE'をフィルタリングして長さを比較するとうまくいくと思います。読みやすいです。この[フィドル](https://jsfiddle.net/awolf2904/zeuzzp6w/)を見てください。削減はまた、それを検出する良い方法です。あなたのコードは少し最適化できると思います。フィドルを見てください。 – AWolf

1

あなたはこの

angular.forEach($scope.myObject.life_log, function(item){ 
    if(item.status !=='ALIVE'){ 
     $scope.isAlive = false; 
     break; 
    }else{ 
     $scope.isAlive = true; 
    } 
}); 
ような何かを行うことができます

あなたのhtmlで

<div data-ng-if="isAlive">My element</div> 
-1
// This is here to make it configurable 
$scope.keys = Object.keys($scope.myObject); 

// In this case you have the "life_log" key 
$scope.keys.forEach(k => { 
    $scope.myObject[k].forEach((d) => { 
     // our object here is myObject["life_log"]; 
     // obj is a temp array to check the amount of statuses that are dead 
     var obj = []; 
     d["allAlive"] = d.status.forEach(s =>{ 
     if(s == 'DEAD'){ 
      obj.push("Dead"); 
     } 
     }); 
     if(obj.length > 0){ 
     d.allAlive = false 
     }else{ 
     d.allAlive = true; 
     } 
    }); 
}); 

    <div ng-if="myObject[o].allAlive> 
     ALL ALIVE 
    </div> 
0

次のリンク

https://plnkr.co/edit/ermeKk1dBX8D54pL7vHQ?p=preview

角度コードチェック:

$scope.myObject = {'life_log' : [{status: 'ALIVE'},{status: 'DEAD'}]} 
      $scope.val=true; 
       for(i=0;i<$scope.myObject.life_log.length;i++){ 

       if($scope.myObject.life_log[i].status != "ALIVE") 
       $scope.val=false; 
       } 

htmlコード:あなたはおそらくNG-IFを使用すると思いますが、そこ可能性が一般的に

<div ng-show="val">My element</div>