Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 909
George Huang Avatar asked Jan 21 '15 22:01

George Huang


1 Answers

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>
like image 58
Shomz Avatar answered Nov 09 '22 23:11

Shomz