CODEWITHSUNDEEP
javascripthtmlcssangularjstwitter-bootstrap
Links
Links

Reputation: 227

How to setup Angular/Bootstrap UI in my case?

I am having trouble setting up the Angular / bootstrap for my app

I am following this page's pagination intro.

http://angular-ui.github.io/bootstrap/

My app.js

angular.module('myApp', ['ngRoute','ui.bootstrap']).
    config(['$routeProvider', function($routeProvider) {
       ….
}]);

controller.js

angular.module('myApp', ['ngRoute']).
controller('PaginationCtrl',['$scope', function ($scope) {
  $scope.totalItems = 64;
  $scope.currentPage = 4;
  $scope.maxSize = 5;

  $scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
  };

  $scope.bigTotalItems = 175;
  $scope.bigCurrentPage = 1;
}])

html 

 <div id='pagination-wrapper' ng-controller='PaginationCtrl'>

 <pagination direction-links="false" total-items="totalItems" page="currentPage" num-pages="smallnumPages"></pagination>

</div>

I have no error when I load the page but I can't seem to see the pagination feature. Can anyone help me about it? thanks a lot!

Upvotes: 0

Views: 372

Answers (1)

Blake Petersen
Blake Petersen

Reputation: 993

It appears the problem is with having the dependencies re-declared there. If you remove the ngRoute dependency from the controller.js module, it will work. You can also drop the example vars that you're not using.

angular.module('myApp').
    controller('PaginationCtrl',['$scope', function ($scope) {
        $scope.totalItems = 64;
        $scope.currentPage = 4;
}]);

For a working example: http://plnkr.co/edit/wpgoDrA2Z7pjXbgdNrM8?p=preview

Upvotes: 2

Related Questions