不理解angularjs

时间:2017-02-27 14:33:24

标签: angularjs

我找到了嵌套手风琴的代码:http://embed.plnkr.co/GvMsP2/

动物中的(门,门 - 样本)意味着什么:门和门实例分别包含什么

    <!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 个答案:

答案 0 :(得分:1)

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

1)门是phylum_examples的关键,phylum_examples有一个该关键字的对象

2)来自phylum_examples

(class, class_examples) in phylum_examples

class是class_examples的内部键,class_examples是phylum_examples的对象值

所以它会像

一样
var phylum_examples = {
      class : class_examples
      class : class_examples
}

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

这里是门,门,实例,课堂&amp; class_examples将替换为您的实际值