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>

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

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

编辑：这是当前的output。在那里你可以看到两个对象（日期，短消息和长消息），它们都有前面的值部分。但是，只有上层对象应该显示先前值的列表。

Answer 1

您可以尝试在ng-repeat循环中添加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 2

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

我已经整理了一个jsfiddle，向您展示嵌套的ng-repeats将如何工作。从那时起努力工作。作为旁注，看起来你的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 3

好的，这对我现在有用。它仍然始终显示“Previous Values：”，但这些值仅在它们实际属于消息时显示。

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

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

嵌套的ng-repeat与动态输入

3 个答案: