動的入力によるネストされたng-repeat

Question

ng-repeatを使用してテーブルにJSON応答を表示しようとしています。問題は、受信されるすべてのオブジェクトが同じではないということです。それらのすべてには、日付、短いメッセージ、長いメッセージがあります。長さが異なる付加価値リストを持つものもあります。このリストは、独自のテーブルまたはリスト内の長いメッセージの下に表示する必要があります。私はalert.slice().reverse()を使用します。なぜなら私は最新のエントリを上にしたいからです。新しいオブジェクトは.push({values})を使用して挿入されます。

<tbody class="AlTbody" ng-repeat="alerts in alerts.slice().reverse()" ng-class="className"> 
    <tr class="Altr Aldate"> 
     <td ng-show="{{alerts.Date}}"><b>{{alerts.Date}}:</b> 
     </td> 
    </tr> 
    <tr class="Altr Alshort " ng-click="toggleDetail($index)"> 
     <td>{{alerts.S}}</td> 
    </tr> 
    <tr class="Altr " ng-show="activePosition == $index"> 
     <td class="msgL">{{alerts.L}} 
      <!-- 1) <p ng-show="{{item.List}}"><br><ul><li>Previous values:</li> <li ng-repeat="vals in ValueList">{{vals.value}}</li></ul> </p>--> 
      <!-- 2) <p ng-show="{{List.txt}}"> <br><ul><li>Previous values:</li> <li ng-repeat="List in alerts.List">{{List.txt}}</li></ul> </p>--> 
     </td> 
    </tr> 
</tbody> 

私は既にコードに見られるように2つのアプローチを試みました。最初のメッセージは正しいリストを表示しましたが、長いメッセージが属しているメッセージの代わりに表示されました。私は新しい変数を使用しました。

var l=valList.length; 
scope.List=true; 
while(l>-1){ 
    scope.ValueList.push({value: valList[l]}); 
    l--; 
} 

インデックスを見つけることができなかったため、2番目の方法はまったく機能しませんでした。

var l=valList.length; 
     var indexV= jQuery.inArray(currdate,scope.alerts.Date); 
     while(l>-1){ 
      scope.alerts[indexV].List.push({txt: valList[l]}); 
      l--; 
     } 

編集： これは、現在のoutputです。 2つのオブジェクト（日付、短いメッセージ、長いメッセージ）が表示され、両方とも以前の値のセクションがあります。しかし、上のオブジェクトだけが以前の値のリストを表示することになっています。

Answer 1

は私のアドバイスは、そこから知られている点と、職場で開始することで、完全に可能です。

ネストされたngリピートがどのように機能するかを示すためにjsfiddleをまとめました。その点から試してみてください。 JSON構造体が非常に複雑なように見えますが、それを単純化することができれば面倒です。

https://jsfiddle.net/roscorcoran/wyu7tgxm/

<div ng-app="App" ng-controller="Ctrl1"> 
    <div ng-repeat="alert in alerts"> 
    <a ng-if="alert.Date">{{alert.Date}}</a> 

    <p ng-repeat="val in alert.L.vals"> 
     <a ng-if="val && val.value">{{val.value}}</a> 
    </p> 

    <p ng-repeat="item in alert.List"> 
     <a ng-if="item && item.txt">{{item.txt}}</a> 
    </p> 
    </div> 
</div> 

Answer 2

あなたはngのリピートループ内ng-ifステートメントを追加しようとすることができます：あなたが達成しようとしている何

<p ng-if="{{values.list}}"><br><ul><li>Previous values:</li> <li ng-repeat="vals in values.list">{{vals.value}}</li></ul> </p>--> 

Answer 3

わかりましたので、これが今の私のために動作します。それでも「以前の値：」と表示されますが、実際にメッセージに属している場合にのみ値が表示されます。

<ul ng-if="alerts.List.vals"><li>Previous values:</li> <li ng-repeat="val in alerts.List.vals" >{{val.value}}</li></ul> 

これは、最も優れた最も洗練されたソリューションではありませんが、機能します。値のリストは、私が分割され、すべての不均一なエントリがある文字列があったため、

if(valList){ 
     scope.alerts.push({Date:currdate,S:msgSn,L:msgLn, List:{ vals:[{value:valList[0]},{value:valList[2]},{value:valList[4]},{value:valList[6]}] } }); 
    }else{ 
     scope.alerts.push({Date:currdate,S:msgSn,L:msgLn }); 
    } 

は、私が唯一の値の配列のインデックスさえを表示「）：」私は表示する必要がないもの。