CODEWITHSUNDEEP
javascriptangularjs
Feel Physics
Feel Physics

Reputation: 2783

make the function that works as filter

I am newbie of AngularJS. I tried to make the function that works as filter:

index.html

    <ul class="phones">
      <li ng-repeat="phone in phones | filter:isLong">
        {{phone.name}}
      </li>
    </ul>

controllers.js

phonecatApp.controller('PhoneListCtrl', function ($scope) {

  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];

  $scope.islong = function(phone) {
    var n = phone.name.length;
    if ( n > 7) { return true } else { return false };
  }
});

JsBin

http://jsbin.com/huwam/1/edit

But this doesn't work... Please help me. Thank you for your kindness.

Upvotes: 0

Views: 85

Answers (2)

rnrneverdies
rnrneverdies

Reputation: 15667

As @zeroflagL said,

"You only need to reference the function, not call it:"

 <li ng-repeat="phone in phones | filter:isLong">

Another approach would create a custom filter to achieve this aim.

The main reason is: Custom filters are reusable at any scope.

html

<ul class="phones">
  <li ng-repeat="phone in phones | islong">
    {{phone.name}}
  </li>
</ul>

javascript

phonecatApp.filter("islong", function() {
    return function(items) {
       return items.filter(function(item) { return item.name.length > 7});
    };
});

http://plnkr.co/edit/F374dQ?p=preview

May be you want add parameters:

html

<ul class="phones">
  <li ng-repeat="phone in phones | islong:7">
    {{phone.name}}
  </li>
</ul>

javascript

phonecatApp.filter("islong", function() {
    return function(items, length) {
       return items.filter(function(item) { return item.name.length > length});
    };
});

Source: https://docs.angularjs.org/tutorial/step_09

Upvotes: 3

a better oliver
a better oliver

Reputation: 26848

You only need to reference the function, not call it:

 <li ng-repeat="phone in phones | filter:isLong">

The function itself gets a single item as argument:

$scope.isLong = function(phone) {

Upvotes: 0

Related Questions