current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

I am working for the first time on a custom filter and the basic principal is working (it displays all the cd's of the artist from 7 and up). However it does not update the filter once I change the value (it keeps the same value "7" all the time. This is what I have so far:

HTML INPUT

<input type="number" value="7" id="numberOfCdsByArtist">

CONTROLLER:

$scope. = function (Artist) {
    var numberOfCdsByArtist = $('#numberOfCdsByArtist')[0].value;
    return Artist.numberOfCDs >= numberOfCdsByArtist ;
}

NG-REPEAT:

<div class="Artists" ng-repeat="Artist in Artists | orderBy:'Name' | filter:CDnumber">
  <div>{{Artist.Name}}{{Artist.numberOfCDs}}
</div>
share|improve this question
    
If you want to get the value via jQuery: $('#numberOfCdsByArtist').val();..You shold use ng-modal instead of grabing the value with jQuery in angularjs controller – Marcus H Jun 21 at 11:58
    
Typo: it should be ng-model – David Votrubec Jun 21 at 12:00
up vote 1 down vote 
var numberOfCdsByArtist = $('#numberOfCdsByArtist')[0].value;

Remove the above jquery line from the controller, instead try using a ng-model directive, because then only the angular can detect the model change

angular.module('A', []).controller('C', function ($scope) {
  $scope.cdNo = 0;
  $scope.artists = [
    { name: 'Artist 1', cdNo: 1 },
    { name: 'Artist 2', cdNo: 2 },
    { name: 'Artist 3', cdNo: 3 },
    { name: 'Artist 4', cdNo: 4 },
    { name: 'Artist 5', cdNo: 5 },
    { name: 'Artist 6', cdNo: 6 },
    { name: 'Artist 7', cdNo: 7 }
  ];
  
  $scope.cdNumFilter = function (artist) {
    return artist.cdNo >= $scope.cdNo;
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<section ng-app="A" ng-controller="C">
  
  <input type="number" ng-model="cdNo" min="0"/>
  
  <ul>
    <li ng-repeat="artist in artists | filter: cdNumFilter">{{ artist.name }}:{{ artist.cdNo }}</li>
  </ul>
  
</section>

share|improve this answer
    
Works perfectly fine, thank you Akhil. Do you have an idea as well if i get a value from a cookie: var number = getCookie("GetCdsByArtist"); document.getElementById("numberOfCdsByArtist").value = number; before it replaced the vlaue in the input. Now not anymore of course. I would like to use the cookie info and have that as a starting point, instead of cdNo = 0 would be nice to have cdNo = CookieNumber – Ewald Bos Jun 21 at 13:43
    
You can use angular's $cookies for it, docs.angularjs.org/api/ngCookies/service/$cookies So instead of $scope.cdNo = 0; you can use something like, $scope.cdNo = $cookies.get(key) – akhil.cs Jun 22 at 4:32
up vote 0 down vote

That's because you are not accessing the value in Angular-way.

It should look something like this

<input type="number" ng-model="numberOfCdsByArtist">

And your controller's scope should have corresponding property numberOfCdsByArtist

Like this

$scope.numberOfCdsByArtist = 7;

Also go ahead and read about how one should implement cusotm filter functions in AngularJs. For example here https://scotch.io/tutorials/building-custom-angularjs-filters

share|improve this answer
up vote 0 down vote

Created jsfiddle example of custom filter. Check this may be helpful to you...

JSFiddle link

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

app.controller("MyCtrl", function($scope) {
  $scope.numberOfCdsByArtist = 7;

  $scope.Artists = [{
      "Name": "abc1",
      "numberOfCDs": 10
    }, {
      "Name": "abc2",
      "numberOfCDs": 1
    }, {
      "Name": "abc3",
      "numberOfCDs": 3
    }, {
      "Name": "abc4",
      "numberOfCDs": 5
    }, {
      "Name": "abc5",
      "numberOfCDs": 8
    }, {
      "Name": "abc6",
      "numberOfCDs": 9
    }, {
      "Name": "abc7",
      "numberOfCDs": 12
    }, {
      "Name": "abc8",
      "numberOfCDs": 2
    }, {
      "Name": "abc9",
      "numberOfCDs": 7
    }, {
      "Name": "abc10",
      "numberOfCDs": 6
    }

  ];
});

app.filter("customFilter", function() {
  return function(input, cdNumber) {


    var out = [];
    angular.forEach(input, function(artist) {
      if (artist.numberOfCDs >= cdNumber) {
        out.push(artist);
      }
    });
    return out;
  };

});
<div ng-controller="MyCtrl">
  <input type="number" ng-model="numberOfCdsByArtist">

  <div class="Artists" ng-repeat="Artist in Artists | customFilter:numberOfCdsByArtist ">
    <div>{{Artist.Name}} :- {{Artist.numberOfCDs}}
    </div>

  </div>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.