web-dev-qa-db-fra.com

ng-repeat pour accéder à un tableau à l'intérieur d'objets

J'ai un tableau avec une liste d'objets. Chaque objet comprend également un tableau (voir ci-dessous). J'utilise ng-repeat pour parcourir le tableau enfant de chaque objet. J'ai essayé de nombreuses manières différentes, mais cela ne fonctionne tout simplement pas. Toute indication, direction, aide serait grandement appréciée. Je vous remercie. :-)

<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>
angularjsng-repeat
7
George Huang

Le conseil est de vérifier la console pour errors - Angular est (généralement) très utile avec de telles choses.

Vous avez des valeurs en double dans votre tableau que vous utilisez dans le ng-repeat interne, vous devez donc le suivre par quelque chose. J'ai utilisé $ index dans cet exemple: 

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>

12
Shomz

Pareil comme ça tu peux faire ça:

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>

0
Vijay Patel