ng-repeat访问对象内部的数组

时间:2015-01-21 22:07:45

标签: angularjs ng-repeat

我有一个包含对象列表的数组。每个对象还包括一个数组(见下文)。我正在使用ng-repeat来遍历每个对象的子数组,我尝试了许多不同的方法,但它根本不起作用。任何提示,方向,帮助将非常感激。谢谢。 : - )

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
    angular.module('mlApp', [])
       .controller('mlCtrl', [function () {
          var self = this;
          self.contacts = [
            { contact: 'AAA', mlist: [1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1] },
            { contact: 'BBB', mlist: [0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1,1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1] }

          ];
 } ]);

<div ng-app="mlApp" ng-controller="mlCtrl as mCtrl">
<table>
<thead>..</thead>
<tbody>
    <tr ng-repeat="p in mCtrl.contacts">
        <th width="100px" >{{p.contact}}</th>
        <td ng-repeat="c1 in p.mlist"><input type="checkbox" ng-check='{{c1}}' /></td>
    </tr>

</tbody>
</table>
</div>

2 个答案:

答案 0 :(得分:12)

提示是检查控制台errors - Angular(通常)对这些事情非常有帮助。

您在内部ng-repeat中使用的数组中有重复值,因此您需要通过某些内容进行跟踪。我在这个例子中使用了$ index:

angular.module('mlApp', [])
  .controller('mlCtrl', [
    function() {
      var self = this;
      self.contacts = [{
          contact: 'AAA',
          mlist: [1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1]
        }, {
          contact: 'BBB',
          mlist: [0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1]
        }

      ];
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mlApp" ng-controller="mlCtrl as mCtrl">
  <table>
    <thead>..</thead>
    <tbody>
      <tr ng-repeat="p in mCtrl.contacts">
        <th width="100px">{{p.contact}}</th>
        <td ng-repeat="c1 in p.mlist track by $index">
          <input type="checkbox" ng-check='{{c1}}' />
        </td>
      </tr>

    </tbody>
  </table>
</div>

答案 1 :(得分:0)

就像你可以这样做:

var myApp = angular.module('myApp',[]);

myApp.controller('mycontroller',['$scope',function($scope){
  
  $scope.students=[];
  var i=0;
  for(i=0;i<5;i++){
    var item={Name:'',Marks:[]};
  
    item.Name='student' + i;  
    item.Marks.push({Maths:50-i,Science:50 +i});
    
    $scope.students.push(item);
  }

}]);
<html ng-app='myApp'>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
</head>
  <body ng-controller='mycontroller'>
    <div ng-repeat='student in students'>
      Name : {{student.Name}} 
      <span ng-repeat="m in student.Marks">Maths:{{m.Maths}} Science:{{m.Science}}</span>
      </div>
  </body>
</html>