Question

我正在尝试使用Angular在html模板中创建一个嵌套循环，但是数组的最后一个循环没有显示出来。

可能是什么问题？

{{arduinos}}    

    <div class="db-control-panel" ng-repeat="arduino in arduinos">

      {{ arduino }}

      <div ng-repeat="tubeStatus in arduino.status">

        {{tubeStatus}}

        <div ng-repeat="tube in tubeStatus">

           {{tube}}

        </div>
      </div>
    </div>

arduinos

[{"arduinoID":3,"status":{"tubeStatus":[0,2,0,0]}},{"arduinoID":5,"status":{"tubeStatus":[0,0]}}]

Arduino的

{"arduinoID":3,"status":{"tubeStatus":[0,2,0,0]}}

tubeStatus

[0,2,0,0]

为什么管不显示？

Answer 1

您在tubeStatus数组中有重复的项目，请使用track by $index以避免重复错误。

参考以下代码段：

＆＃13;

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.arduinos = [{
      "arduinoID": 3,
      "status": {
        "tubeStatus": [0, 2, 0, 0]
      }
    }, {
      "arduinoID": 5,
      "status": {
        "tubeStatus": [0, 0]
      }
    }];
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  {{arduinos}}
  <hr>
  <div class="db-control-panel" ng-repeat="arduino in arduinos">

    {{ arduino }}
    
    <div ng-repeat="tubeStatus in arduino.status">

      {{tubeStatus}}

      <div ng-repeat="tube in tubeStatus track by $index">

        {{tube}}

      </div>
      <hr>
    </div>
  </div>
</div>

＆＃13;

嵌套数组ng-repeat在AngularJs中不起作用

1 个答案: