Value from input to Angular scope (filter)

Question

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>

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öglund
– Marcus Höglund, Commented Jun 21, 2016 at 11:58

akhil.cs · Accepted Answer · 2016-06-21 12:03:52Z

1

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>

answered Jun 21, 2016 at 12:03

akhil.cs

6911 gold badge5 silver badges13 bronze badges

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

2 Comments

Ewald Bos Over a year ago

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

akhil.cs Over a year ago

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)

David Votrubec · Accepted Answer · 2016-06-21 12:00:04Z

0

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

answered Jun 21, 2016 at 12:00

David Votrubec

4,1843 gold badges35 silver badges46 bronze badges

Comments

Sachin K · Accepted Answer · 2016-06-21 12:29:05Z

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>

Collectives™ on Stack Overflow

Value from input to Angular scope (filter)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related