Question

我正在尝试从JSON文件中提取数据并使用它来填充导航菜单，该菜单由使用Angular UI可折叠函数折叠的div组成。

<!DOCTYPE html>
<html ng-app="samApp">

  <head>
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script data-require="angular-ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body>

    <div CollapseCtrl navdata ng-repeat="items in item">
        <div class="nav-super">{{items.img}}</div>
              <div collapse="isCollapsed"> 
                  <div class="nav-sub">{{items.img}}</div>
            </div> 
    </div>

  </body>

</html>

我的问题是：

我无法使折叠中的元素获取json信息。如果我在其中一个div上设置ng-repeat，则sub或super div将不会接受它。在最外层div上设置ng-repeat会导致没有子div进行重复。
我已将控制器包含在指令中，并将折叠功能和HTTP GET的指令分配给同一个div。

Answer 1

我相信你正在寻找这样的东西：

<!DOCTYPE html>
<html ng-app="samApp">

  <head>
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script data-require="angular-ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="navDataController">

    <ul>
        <li ng-repeat="item in items">
          <span ng-click="action(item)">{{item.img}}</span>
              <ul ng-show="item.isCollapsed">
                  <li ng-repeat="sub in item.subcontent">
                    <span>{{sub.title}} {{sub.}}</span>
                  </li>
                </ul>
          </li>
    </ul>
  </body>

</html>

http://plnkr.co/edit/DlVqJOzQwjxdCVjStvZg?p=preview

这个例子有效，但它有点粗糙;学习基础知识，让它变得甜美。

Answer 2

还修改了你的plunkr工作：

http://plnkr.co/edit/jxVGxl7h8gBlFLQ9zyTW?p=preview

HTML

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script data-require="angular-ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-app="samApp" ng-controller="CollapseCtrl">

    <div ng-repeat="item in items">
      <div class="nav-super" ng-click="item.isCollapsed=!item.isCollapsed">{{item.img}}</div>
              <div collapse="item.isCollapsed">
                  <div class="nav-sub" ng-repeat="subElement in item.subcontent">{{subElement.title}}</div>
            </div> 
    </div>

  </body>

</html>

JS

var app = angular.module('samApp', ['ui.bootstrap']);

app.service('navdata', function($http) {
  var myServiceObj = {
    myData: {},
    getData: function() {
      $http.get('data.json').success(function(data, status, headers, config) {
        angular.copy(data, myServiceObj.myData);

      });
    }
  }
  myServiceObj.getData();
  return myServiceObj;
});
app.controller('CollapseCtrl', function($scope, navdata) {
  $scope.items = navdata.myData;
});

基本上，指令用于添加封装行为或DOM元素操作。我认为服务对于处理对服务器的请求以及存储要由各种控制器使用的数据更有意义。

我还使用数据存储isCollapsed布尔值，因此您可能希望循环数据并将其设置为false，如果您希望它们最初关闭或者只是在崩溃表达式中反转布尔逻辑。

你在错误的地方拥有所有正确的逻辑，并且还阅读了ng-repeat文档，这是我经常访问的文章。

Ng-repeat不在Angular-UI中显示JSON数据

2 个答案: