Вложенный ng-repeat с динамическим вводом

0

Я пытаюсь отобразить ответ JSON в таблице, используя ng-repeat. Проблема в том, что не все получаемые объекты одинаковы. У всех из них есть дата, короткое сообщение и длинное сообщение. Есть также те, у которых есть дополнительный список значений, отличающийся по длине. Этот список должен быть размещен под длинным сообщением в его собственной таблице или списке. Я использую 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>

Я уже пробовал два подхода, как показано в коде. Первый отобразил список правильно, однако он отображался под каждым длинным сообщением, а не только с тем, к которому он принадлежит. Я использовал новую переменную.

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

Второй подход не работал вообще, потому что я не мог найти индекс.

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

edit: Это текущий вывод. Там вы можете увидеть два объекта (дата, короткое сообщение и длинное сообщение), и оба из них имеют раздел предыдущих значений. Однако предполагается, что только верхний объект должен отображать список предыдущих значений.

Теги:
angularjs-ng-repeat

3 ответа

0
Лучший ответ

То, что вы пытаетесь достичь, вполне возможно, мой совет - начать с известной точки и работать оттуда.

Я собрал jsfiddle, чтобы показать вам, как будут работать вложенные ng-повторы. попытайтесь работать с этого момента. Как побочная заметка, похоже, что ваша структура 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>
Поделиться
  • 0
    Это также работает, когда объект не предопределен, и еще больше добавлено во время выполнения программы? Структура JSON является такой сложной, потому что я получаю «оповещения»: одно оповещение содержит дату, короткое сообщение и длинное сообщение. Некоторые оповещения также содержат список значений. Я не знаю, как это упростить. Я также добавил вывод на мой вопрос.
  • 0
    Да, если модель области видимости изменяется асинхронно, то она должна также обновляться в представлении / шаблоне.
0

Ладно, теперь это работает для меня. Он по-прежнему всегда отображает "Предыдущие значения:", но значения отображаются только тогда, когда они действительно принадлежат к сообщению.

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

Я показываю только индексы массива значений, потому что список значений - это строка, которую я разделяю, и каждая нечетная запись "):" которую мне не нужно отображать.

Поделиться
  • 0
    Вы должны быть осторожны, когда делаете это: вы предположите, что массив содержит по крайней мере 7 записей, вы можете проверить это раньше и обработать соответствующим образом ... Так что я правильно понял, что только четные индексы массива имеют эти "предыдущие ценности"? если да, вы можете сделать следующее: <li ng-if = "$ index% 2 == 0"> Предыдущие значения: </ li>
0

Вы можете попытаться добавить инструкцию ng-if внутри цикла ng-repeat:

<p ng-if="{{values.list}}"><br><ul><li>Previous values:</li> <li ng-repeat="vals in values.list">{{vals.value}}</li></ul> </p>-->
Поделиться
  • 0
    Он по-прежнему отображает значения под каждым длинным сообщением.
  • 0
    Тогда я не совсем понял ваш вопрос, не могли бы вы сделать пример вывода? Кроме того, когда и для чего вы устанавливаете "activePosition"? Кстати, вы можете заказать коллекцию в угловом ng-repeat с помощью «| orderBy: expression: reverse» ( docs.angularjs.org/api/ng/filter/orderBy )
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню