CODEWITHSUNDEEP
angularjsgridng-grid
gwin003
gwin003

Reputation: 7992

Grid in Angular without $scope

Has anyone implemented a grid control in AngularJS using the controller as syntax? I was working with ng-grid but am finding out it heavily relies on us injecting $scope into all of our controllers.

Here is one example of it not performing properly: http://plnkr.co/edit/Kyf6eZFrDnAtwaKJiC0K?p=preview

Even though there are only 5 items in the list, the pager at the bottom allows you to go forward as many pages as you want. This is because the totalServerItems property not being set correctly.

There are a slew of other oddities, such as events not firing, data array lengths not being set and just overall not working real well.

Has anyone worked with any grids in AngularJS that support the controller as syntax?

Link to controller as syntax: Reference

Upvotes: 0

Views: 91

Answers (1)

timtos
timtos

Reputation: 2305

With two little changes at least your pager does stop:

// main.js

(function() {

  angular.module('myApp', ['ngGrid']);
  angular.module('myApp').controller('MyCtrl', MyCtrl);

  function MyCtrl() {
    var vm = this;
    vm.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    vm.totalServerItems = vm.myData.length;
    vm.gridOptions = { 
      data: "mc.myData",
      enablePaging: true,
      totalServerItems: 'mc.totalServerItems',
      showFooter: true
    };
  }

})();

Changes:

vm.totalServerItems = vm.myData.length;

and 

totalServerItems: 'mc.totalServerItems',

Does that help?

Upvotes: 1

Related Questions