Passing data from input to Angular's $scope (filter)

Question

Passing data from input to Angular's $scope (filter)

I'm currently working on my first custom filter, and while the basic principle is functioning (it displays all the CDs of an artist from 7 and up), I'm encountering an issue where the filter doesn't update when I change the value. It consistently remains at "7". Here's what I have so far:

HTML INPUT

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

CONTROLLER:

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

NG-REPEAT:

<div class="Artists" ng-repeat="Artist in Artists | orderBy:'Name' | filter:filterCDs">
  <div>{{Artist.Name}}{{Artist.numberOfCDs}}
</div>

javascript angularjs input filter angularjs-ng-repeat

Answer 1

Answer №1

let countOfAlbumsByPerformer = $('#countOfAlbumsByPerformer')[0].value;

Eliminate the above jquery statement from the controller and consider utilizing an ng-model directive instead. This way, only Angular will be able to detect any changes in the model.

angular.module('A', []).controller('C', function ($scope) {
  $scope.albumCount = 0;
  $scope.performers = [
    { name: 'Performer 1', albumCount: 1 },
    { name: 'Performer 2', albumCount: 2 },
    { name: 'Performer 3', albumCount: 3 },
    { name: 'Performer 4', albumCount: 4 },
    { name: 'Performer 5', albumCount: 5 },
    { name: 'Performer 6', albumCount: 6 },
    { name: 'Performer 7', albumCount: 7 }
  ];
  
  $scope.albumNumFilter = function (performer) {
    return performer.albumCount >= $scope.albumCount;
  }
  
});

<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="albumCount" min="0"/>
  
  <ul>
    <li ng-repeat="performer in performers | filter: albumNumFilter">{{ performer.name }}:{{ performer.albumCount }}</li>
  </ul>
  
</section>

Answer 2

let countOfAlbumsByPerformer = $('#countOfAlbumsByPerformer')[0].value;

Eliminate the above jquery statement from the controller and consider utilizing an ng-model directive instead. This way, only Angular will be able to detect any changes in the model.

angular.module('A', []).controller('C', function ($scope) {
  $scope.albumCount = 0;
  $scope.performers = [
    { name: 'Performer 1', albumCount: 1 },
    { name: 'Performer 2', albumCount: 2 },
    { name: 'Performer 3', albumCount: 3 },
    { name: 'Performer 4', albumCount: 4 },
    { name: 'Performer 5', albumCount: 5 },
    { name: 'Performer 6', albumCount: 6 },
    { name: 'Performer 7', albumCount: 7 }
  ];
  
  $scope.albumNumFilter = function (performer) {
    return performer.albumCount >= $scope.albumCount;
  }
  
});

<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="albumCount" min="0"/>
  
  <ul>
    <li ng-repeat="performer in performers | filter: albumNumFilter">{{ performer.name }}:{{ performer.albumCount }}</li>
  </ul>
  
</section>

Answer 3

Answer №2

The reason you're not getting the desired result is because you're not following Angular's standards.

Try formatting it like this:

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

Make sure your controller's scope includes the property numberOfCdsByArtist

It should be defined as follows:

$scope.numberOfCdsByArtist = 7;

Additionally, take some time to understand how custom filter functions are implemented in AngularJS. Check out this resource for more information here.

Answer 4

The reason you're not getting the desired result is because you're not following Angular's standards.

Try formatting it like this:

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

Make sure your controller's scope includes the property numberOfCdsByArtist

It should be defined as follows:

$scope.numberOfCdsByArtist = 7;

Additionally, take some time to understand how custom filter functions are implemented in AngularJS. Check out this resource for more information here.

Answer 5

Answer №3

Take a look at my customized filter in action on jsfiddle. It might come in handy for you...

JSFiddle custom filter demo

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

app.controller("MyCtrl", function($scope) {
  $scope.numberOfBooksByAuthor = 5;

  $scope.Authors = [{
      "Name": "author1",
      "numberOfBooks": 10
    }, {
      "Name": "author2",
      "numberOfBooks": 3
    }, {
      "Name": "author3",
      "numberOfBooks": 7
    }];

});

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


    var out = [];
    angular.forEach(input, function(author) {
      if (author.numberOfBooks >= bookNumber) {
        out.push(author);
      }
    });
    return out;
  };

});

<div ng-controller="MyCtrl">
  <input type="number" ng-model="numberOfBooksByAuthor">

  <div class="Authors" ng-repeat="Author in Authors | customFilter:numberOfBooksByAuthor ">
    <div>{{Author.Name}} :- {{Author.numberOfBooks}}
    </div>

  </div>

Answer 6

Take a look at my customized filter in action on jsfiddle. It might come in handy for you...

JSFiddle custom filter demo

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

app.controller("MyCtrl", function($scope) {
  $scope.numberOfBooksByAuthor = 5;

  $scope.Authors = [{
      "Name": "author1",
      "numberOfBooks": 10
    }, {
      "Name": "author2",
      "numberOfBooks": 3
    }, {
      "Name": "author3",
      "numberOfBooks": 7
    }];

});

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


    var out = [];
    angular.forEach(input, function(author) {
      if (author.numberOfBooks >= bookNumber) {
        out.push(author);
      }
    });
    return out;
  };

});

<div ng-controller="MyCtrl">
  <input type="number" ng-model="numberOfBooksByAuthor">

  <div class="Authors" ng-repeat="Author in Authors | customFilter:numberOfBooksByAuthor ">
    <div>{{Author.Name}} :- {{Author.numberOfBooks}}
    </div>

  </div>

Passing data from input to Angular's $scope (filter)

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting issues when testing Angular services using Jasmine and Chutzpah

establishing communication between the angular controller and route controller

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

Strategies for resolving duplicate jQuery code in my project

Jenkins process encounters issues with sed execution

How to send arguments to a callback function in Next.JS

Store Dark Mode preferences in the browser's local storage using React and Material-UI

Why isn't the page being redirected when attempting to use JavaScript with window.location and window.location.href?

The result of Coordinates.speed is consistently null

The issue with Ionic 2 arises when attempting to use this.nav.push() because it

Side-by-side arrangement of AngularJS Accordion in a vertical layout

The Transition Division Is Malfunctioning

Tips for comparing two arrays in node.js

The best practices for utilizing getStaticProps with Firebase

Guidelines on launching an ionic 4 modal using routes

Dealing with special characters in Mustache.js: handling the forward slash

Refresh the content of VueJS Resource

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

Encountering an unrecoverable SyntaxError while trying to deploy a website on Netlify

Using Typescript: How to pass a function as an argument in another function