2017-02-27 6 views
1

にこのNG-繰り返し構文を理解していない私は、ネストされたアコーディオンのために、このコードを見つけました:http://embed.plnkr.co/GvMsP2/がangularjs

は動物で(門、phylum_examples)は何を意味し:門とphylum_examplesはそれぞれ

<!doctype html> 
<html ng-app="plunker"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js"></script> 
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<div ng-controller="AccordionDemoCtrl"> 
    <div accordion ng-repeat="(phylum, phylum_examples) in animals"> 
    <div accordion-group class="accord" heading="{{phylum}}"> 
    <div accordion ng-repeat="(class, class_examples) in phylum_examples"> 
     <div accordion-group class="accord" heading="{{class}}"> 
     <div accordion ng-repeat="animal in class_examples"> 
      <div accordion-group class="accord" heading="{{animal}}"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

</div> 


    </body> 
</html> 
を何含みません

JS:

angular.module('plunker', ['ui.bootstrap']); 

function AccordionDemoCtrl($scope) { 



     $scope.animals = {vertibrates: 
    {mammals: ['lion', 'dog'], 
    birds: ['hawk', 'sparrow']}, 
    invertibrates: {'insects': ['bee', 'ant']}}; 


} 

答えて

1
<div accordion ng-repeat="(phylum, phylum_examples) in animals"> 

1)門がphylum_examplesおよびpHのためのキーでありますylum_examplesクラスがclass_examplesとclass_examples用インナーキーはphylum_examples

のオブジェクト値であるので、それはのような

なりphylum_examples

(class, class_examples) in phylum_examples 

から)そのキー

2のオブジェクトを持っています

var phylum_examples = { 
     class : class_examples 
     class : class_examples 
} 

var array = [ 
    phylum : phylum_examples, 
    phylum : phylum_examples, 
    phylum : phylum_examples, 
] 

ここに門、門例、クラス& class_examplesは実際の値で置き換えられます