ng-repeat dynamic menu angularJS

Question

im trying to make a dynamic menu using ng-repeat, ui router and data from a json file. this is my navbar.html

 <ul class="nav navbar-nav" ng-controller="NavBarCtrl">         

  <div ng-repeat="item in navbarlist">
  <li><a ui-sref="item.title" ui-sref-active="active">{{item.title}}</a></li>
  </div>  <!--ng-repeat-->
  </ul>

navbar.js

var app = angular.module("catalogue", ['ui.router'])

  app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {

    $stateProvider   
       .state('navbar', {
        url: '/navbar',
        templateUrl: 'navbar/navbar.html',
        controller: 'NavBarCtrl'
      })

  }])


app.controller('NavBarCtrl', ['$scope', '$http', function($scope, $http, $stateParams) {
     $http.get('navbar.json').then(function(response){
    //  $scope.navbar = response.data;
     //   $scope.navbar = "navbar.data" [];
    //   $scope.navbarlist = "navbarlist" [];

       $scope.navbarlist = response.data; 


  });
}])

and navbar.json

{
    "navbarlist": [
        {
            "title": "home"

        },
        {
            "title": "category1"

        },
        {
            "title": "category2"

        },
        {
            "title": "category3"

        },
        {
            "title": "category1"

        },
        {
            "title": "category2"

        }

    ]
}

and i have in index.html

  <navbar></navbar>

but my nav bar does not show. Im assuming the problem is with the controller. Where have i gone wrong?

Try response.data.navbarlist in your controller

Zyga
– Zyga

2017-02-06 12:11:55 +00:00
Commented Feb 6, 2017 at 12:11 — Zyga
– Zyga, Commented Feb 6, 2017 at 12:11
Where's your navbar directive?

Dario
– Dario

2017-02-06 12:21:37 +00:00
Commented Feb 6, 2017 at 12:21 — Dario
– Dario, Commented Feb 6, 2017 at 12:21

Yury Kulikov · Accepted Answer · 2017-02-06 13:39:50Z

2

I think your problem not in controller.

You mentioned your tag in index.html, but there is no definition of it.

<navbar></navbar>

To using custom tags like this, read more about directives: https://docs.angularjs.org/guide/directive You need to make a directive and specify template or templateUrl indside of it.

For this code example, just put your mark up directly in index.html, it will solve the problem.

Your working code within directive on JSFiddle: https://jsfiddle.net/ukulikov/424z6o2x/

answered Feb 6, 2017 at 13:39

Yury Kulikov

1318 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ng-repeat dynamic menu angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related