CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
user6086008
user6086008

Reputation: 111

ng-repeat dynamic menu angularJS

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?

Upvotes: 0

Views: 581

Answers (1)

Yury Kulikov
Yury Kulikov

Reputation: 131

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/

Upvotes: 2

Related Questions