1つまたは複数のng-ifステートメントの角チェックが真である

Question

私は、複数のng-ifステートメントを使用してセルにデータの集合が含まれている動的なテーブルを作成している状況があります。基本的に私はif文が真であるかどうかを知る必要があるので、もう1つはng-ifです。

これは私がやっていることの簡単な例です。集計結果が異なる約20の列があります。

<table> 
    <tr ng-repeat="record in data"> 
     <td> 
      <span ng-if="record.some_number > 0 && record.type == 'SomeType'">{{data1}}</span> 
      <span ng-if="record.age >= 20 && record.age <= 50 && record.gender == 'MALE'">{{data2}}</span> 
      <span ng-if="(record.age <= 20 || record.age >= 50) && record.gender == 'FEMALE'">{{data3}}</span> 
      <span ng-if="!(record.some_number > 0 && record.type == 'SomeType') && !(record.age >= 20 && record.age <= 50 && record.gender == 'MALE') && !((record.age <= 20 || record.age <= 50) && record.gender == 'FEMALE')">{{data4}}</span> 
     </td> 
    </tr> 
<table> 

条件が完全に異なっているので、私はNG-スイッチを使用することはできません。これはデータの集約であり、/ elseではありません。私はちょうど '！'私の集約のいくつかには多くの条件が含まれており、if文のいくつかは自明ではないため、別のスパンの各条件に適用されます。あまりにも複雑な 'その他の'条件のメンテナンスが悪夢になるので、多くの集約セルがあります。

理想的には、ng-ifステートメントが真である場合に、単一の変数をtrueに割り当てることができればと思っています。何かご意見は？

Answer 1

私はそれがベストプラクティスであるかどうかわかりませんが、私はあなたのロジックをJSに入れておくべきだと考えています.HTMLは、表示しているスコープの状態を反映するテンプレートにする必要があります。

このようにして、あなたの条件はいつもあなたのJSでチェックされます。

UPDATE：新しい内容に基づいて：

ですから、データを持っていて、それを最初に処理する必要があるもの、それはのように見えることは、他のアプリのパフォーマンスは、ウォッチャーの過負荷に苦しむだろう。

最初に：HTMLを簡略化してください。record.some_number > 0 && record.type == 'SomeType'"のようなすべてのロジックはJSに属しています。

<table> 
    <tr ng-repeat="record in data"> 
     <td> 
      <span ng-repeat="item in record.dataToShow" ng-bind-html='item'></span> // now you just repeat the data that has been processed 
     </td> 
    </tr> 
</table> 

2番目：ループ内のJavaScriptで処理を行います。

$scope.data = [ some array with lots of stuff ]; 

for(var idx in $scope.data){ 
    var record = $scope.data[ idx ]; // assuming JSON object 
    var dataToShow = []; // store your data(s) in an array 

    // if a condition is met, push your data onto the array 
    if(record.some_number > 0 && record.type == 'SomeType'){ 
     dataToShow.push(data1); 
    } 
    if(record.age >= 20 && record.age <= 50 && record.gender == 'MALE'){ 
     dataToShow.push(data2); 
    } 
    // continue processing conditions 

    if(dataToShow.length === 0){ // none have been true if array is empty 
     // do something 
    } 
    record.dataToShow = dataToShow; 
} 

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

Answer 2

NG-場合、様々な条件のための処理方法を決定するためにスコープ機能を取得します。

<span ng-if="showHideCell(this)">{{data1}}</span> 
<span ng-if="showHideCell(this)">{{data2}}</span> 

そして、あなたのコントローラで..

$scope.showHideCell = function(ele) { 

    //Your complex condition here 

    return decition; // true or false 
} 

---

アプリケーションがスループットのために重要であるとコントロールをたくさん持っている場合は、私は彼の答えでSoluableNonagonのメソッドを使用してお勧めします。そこではすべての消化サイクルは変数をチェックするだけです。

Answer 3

https://github.com/zachsnow/ng-elifに興味があるかもしれません。角度のng-ifに対するif-elseif-elseの拡張がかなり良いです。

Answer 4

コントローラのジェネリックメソッドを使用して要素の条件をチェックすることができますが、要素の条件を確認することもできます。

Hereは、あなたが達成したいと思っているものに似た何かをしている、あなたにアイデアを与えるかもしれません。

私がここで行うことは、例えば、奇数値の配列と偶数値の配列の2つの配列を持つことです。私はconditionを呼び出すallメソッド（ng-repeatループから配列の値を取得する）を受け入れるコントローラにconditionメソッドを持っています。

$scope.condition = function(element, value) { 
    // Just returns true for even values 

    if (typeof value === "number") 
     return value % 2 == 0; 
    else if (value instanceof Array) { 
     return value.every(function(item) { 
     return item % 2 == 0; 
     }); 
    } 

    } 

    $scope.all = function(element, value) { 
    return $scope.condition(element, value); 
    } 

同様の方法で作業できます。