如何在angular js中的嵌套ul li ul li列表项中重复数据?

时间:2014-09-12 05:55:05

标签: javascript angularjs angularjs-ng-repeat

我正在创建一个新的ul>li>ul>li列表,我想根据列表项重复数据。

我的代码是这样的:

Screenshot

我的角色代码是:

var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function ($scope) {
    $scope.items = [
      {
        title:"book" [
          {subtitle:"name", description:"____Book_______"}
          ],
        description: "Some Book is very Good."
      }, 
      {
        title:"book_2" [
          {subtitle:"name", description:"____Book_2______"}
          ],
        description: "2Some Book is very Good."
      }
    ];
});

我的HTML代码是:

<body ng-app="myFapp">
    <ul ng-controller="myControler">
        <li ng-repeat="item in items">
            <div>{{item.title}}</div>
            <div>{{item.description}}</div>
            <ul>
                <li>
                    <div>{{subtitle.title}}</div>
                    <div>{{item.description}}</div>
                </li>
            </ul>
        </li>
    </ul>
</body>

My Plunker

1 个答案:

答案 0 :(得分:2)

您的JSON不合适,需要采用以下格式:

JSON:

$scope.items = [
      {
        "title":"book" ,"subtitle":[
          {"subtitle":"name", "description":"____Book_______"}
          ],
        "description": "Some Book is very Good."
      }, 
      {
        "title":"book_2" , "subtitle":[
          {"subtitle":"name", "description":"____Book_2______"}
          ],
        "description": "2Some Book is very Good."
      }

    ];

然后在你的html标记中你需要像这样引用它(嵌套的ng-repeat):

    <ul ng-controller="myControler">
        <li ng-repeat= "item in items">
          <div>{{item.title}} </div>
          <div>{{item.description}}</div>
          <ul>
            <li ng-repeat="subtitle in item.subtitle">
              <div>{{subtitle.subtitle}} </div>
              <div>{{subtitle.description}}</div>
            </li>
          </ul>
        </li>
      </ul>

Working Plunkr