Angularjs: filter ngRepeat when using ControllerAs

Question

This post originally asked the question, and includes a popular answer, but I can't find a way of updating the code to work with ControllerAs.

var app = angular.module('myApp', []);

app.filter('slice', function() {
  return function(arr, start, end) {
    return arr.slice(start, end);
  };
});

app.controller('MainController', function() {
  vm = this;
  vm.items = [];
  vm.start = 0;
  vm.end = 20;
  for (var i = 0; i < 100; i++) vm.items.push(i);
  return vm;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller='MainController as main'>
    Start: <input ng-model="main.start"> End: <input ng-model="main.end">
    <ul>
      <li ng-repeat="item in items | slice:main.start:main.end">{{item}}</li>
    </ul>
  </div>
</div>

dhavalcengg · Accepted Answer · 2015-01-08 13:07:45Z

5

checkout this plnkr

When you work with controllerAs syntax you need to use controller pointer to access its properties and methods.

<div ng-app="myApp">
  <div ng-controller='MainController as main'>
    Start: <input ng-model="main.start"> End: <input ng-model="main.end">
    <ul>
      <li ng-repeat="item in main.items | slice:main.start:main.end">{{item}}</li>
    </ul>
  </div>
</div>
</body>

answered Jan 8, 2015 at 13:07

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

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

3 Comments

Sergiu Paraschiv Over a year ago

Good catch. The whole vm = this; thing though looks bad to me. It's an undeclared (and two letters!) variable to start with....

dhavalcengg Over a year ago

yeah.. people get confuse with $scope and controller as syntax. or sometime its just syntax problem..

Simon H Over a year ago

Whoops - one too few main. Apologies for uninteresting question.

Collectives™ on Stack Overflow

Angularjs: filter ngRepeat when using ControllerAs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related