Julia Z Julia Z - 6 months ago 8x
Javascript Question

nested ng-repeat with dynamic input

I am trying to display a JSON response in a table using ng-repeat. The problem is that not all objects recieved are the same. All of them have a date, short message and long message. There are also ones with an additional value list, differing in length. This list should be diplayed underneath the long message within its own table or list. I use the alert.slice().reverse() because I want the newest entries to be on top. The new objects are inserted using .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 class="Altr Alshort " ng-click="toggleDetail($index)">
<td >{{alerts.S}}</td>
<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>-->

I already tried two approaches as seen in the code. The first one displayed the list correct however it was displayed underneath every long message instead of only the one it belongs to. I used a new variable.

var l=valList.length;
scope.ValueList.push({value: valList[l]});

The second approach did not work at all because I could not find an index.

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

This is the current output. There you can see two objects( date, short message and long message) and both of them have the previous values section. However only the upper object is supposed to diplay the list of previous values.


What you are trying to achieve is entirely possible, my advice is to start at a known point and work from there.

I have put together a jsfiddle to show you how nested ng-repeats will work. try and work from that point. As a side note it looks like your JSON structure is overly complex, if you can simplify that down I would.


<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 ng-repeat="item in alert.List">
      <a ng-if="item && item.txt">{{item.txt}}</a>