2015-01-21 12 views
5

Ho una matrice con un elenco di oggetti. Ogni oggetto include anche un array (vedi sotto). Sto usando ng-repeat per scorrere l'array figlio per ogni oggetto, ho provato in molti modi diversi, ma semplicemente non funziona affatto. Qualsiasi suggerimento, direzione, aiuto sarebbe molto apprezzato. Grazie. :-)ng-repeat per accedere alla matrice all'interno degli oggetti

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

risposta

11

Il suggerimento è quello di controllare la console per errors - angolare è (di solito) molto utile con queste cose.

Si dispone di valori duplicati nell'array che si utilizza nella ripetizione interna di ng, quindi è necessario rintracciarlo per qualcosa. Ho usato $ indice in questo esempio:

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>

+0

sei l'uomo !!! Grazie mille. Che funzioni! –

+0

Deve funzionare! Prego. :) E benvenuti a Stack Overflow! – Shomz

+1

NICE risposta. @GeorgeHuang ma se ti stai chiedendo perché questo non controlla la casella di controllo e aggiorna i valori quando controlli o deseleziona? avresti bisogno di modificarli un po 'facendo ' 'Devi usare' ng-model' 'ng-true/false-value' in modo che ng-model sia impostato di conseguenza e ng-checked serve solo a correggere il bug dove truevalue/falsevalue non sa se è intero di stringa. – PSL

0

Stesso genere si può fare questo:

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>

Problemi correlati