带有动态输入的嵌套ng重复

Nested ng-repeat with dynamic input

本文关键字：嵌套 ng 重复 输入 动态      更新时间：2023-09-26

我正在尝试使用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>

我已经尝试了代码中的两种方法。第一个显示了正确的列表，但它显示在每个长消息下面，而不是只显示它所属的消息。我使用了一个新变量。

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

编辑：这是电流输出。在那里你可以看到两个对象（日期、短消息和长消息），它们都有前面的值部分。然而，只有上一个对象应该显示以前值的列表。

您想要实现的目标是完全可能的，我的建议是从一个已知的点开始并从那里开始工作。

我制作了一个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>

您可以尝试在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>-->

好吧，现在这对我来说很管用。它仍然始终显示"以前的值："，但这些值只有在实际属于消息时才会显示。

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

我只显示值数组的偶数索引，因为值列表是一个我拆分的字符串，每个不均匀的条目都是"）："，我不需要显示它。

相关文章：