CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
George Huang
George Huang

Reputation: 2523

ng-repeat to access array inside of objects

I have an array with a list of objects. Each object also including an array (see below). I am using ng-repeat to iterate through the child array for each object, I tried many different way, but it just don't work at all. Any hint, direction, help would be great appreciated. Thank you. :-)

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

Upvotes: 7

Views: 26309

Answers (2)

Vijay Patel
Vijay Patel

Reputation: 81

Same like that you can do this:

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>

Upvotes: 0

Shomz
Shomz

Reputation: 37701

The hint is to check the console for errors - Angular is (usually) very helpful with such things.

You have duplicate values in your array you use in the inner ng-repeat, so you need to track it by something. I used $index in this example: 

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>

Upvotes: 12

Related Questions