ng-重复子阵列不起作用

ng-repeat on subarray not working?

本文关键字：阵列 不起作用 ng-      更新时间：2023-09-26

我有这个代码： 

var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
  $scope.items = [{
    val: 'bleh1',
    subval: [{
      attr1: 1,
      attr2: 2
    },{
      attr1:3,
      attr2:4
    }]
  }, {
    val: 'bleh2',
    subval: [{
      attr1: 1,
      attr2: 2
    },{
      attr1:3,
      attr2:4
    }]
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <div ng-repeat="item in items.subval">
      <div>{{item.attr1}}</div>
      <div>{{item.attr2}}</div>
  </div>
  </body>
</html>

我一直在试图弄清楚为什么 ng-repeat 不起作用，但我无法解决它。我遵循CodeSchool上的AngularJS课程，并浏览了AngularJS教程，但我在代码中找不到错误。我也一直在四处寻找，也找不到解决方案。你们能指出我应该寻找什么或我有什么错误吗？

items没有

一个名为subval的属性，因为items是一个数组。我认为这里要做的是使用嵌套ng-repeat s：

<div ng-repeat="item in items">
    <div ng-repeat="subitem in item.subval">
        <div>{{subitem.attr1}}</div>
        <div>{{subitem.attr2}}</div>
    </div>
</div>

例<小时 />如果你不喜欢有额外的div层，你可以在控制器中定义这个函数来展平数组：

$scope.allSubvals = function() {
    return [].concat.apply([], this.items.map(function (i) { return i.subval; }));
};

然后像这样使用它：

<div ng-repeat="item in allSubvals()">
    <div>{{item.attr1}}</div>
    <div>{{item.attr2}}</div>
</div>

例

相关文章：