Search code examples
jsonangularjsangularjs-directiveangularjs-scopeangular-ui

Ng-repeat not showing JSON data in Angular-UI

I am trying to pull in data from a JSON file and use it to populate a navigation menu, composed of divs that collapse using the Angular UI collapsible function.

Here is my code (also on Plunker here):

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

My issues are:

  • I cannot make the elements within the collapsible take the json information. If I set ng-repeat on one of the divs, the sub or super div will not take it. Setting ng-repeat on the outermost div results in none of the sub divs taking the repeat.

  • I have enclosed my controllers in directives and assigned both directives, for the collapsing function and the HTTP GET, to the same div.

Solution

  • I do believe you're looking for something like this:

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

    The example works, but it's a bit crude; learn basics to make it sweet.