Filtering data with AngularJS upon user clicks

Question

Filtering data with AngularJS upon user clicks

Encountering a perplexing issue at the moment. I have created buttons using ng-repeat and my intention is for them to filter my list when clicked on. However, I am facing an issue where the list fails to filter upon clicking. Here are the buttons:

<div ng-repeat="i in links">
   <a  href="" ng-click=" search = i.title " > {{i.title }}  </a> 
</div>

<div ng-repeat="i in links | filter: search">
   <p>{{i.names}}</p>     
</div>

Strangely enough, when I try something like this, the list filters properly:

<a ng-click="search = 'music' ">Click</a>

javascript angularjs

Answer 1

Answer №1

The reason behind this behavior lies in the quirks of Javascript's inheritance system. Essentially, you need to encapsulate your primitive values within an object (as shown in the code snippet below with the custom object). Each iteration of ng-repeat creates its own scope, causing the variable search to be created separately for each iteration instead of being shared among them.

You can explore this concept further by visiting the following Plunker:

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

<a href="" ng-click="custom.search=i.name;">

<div ng-repeat="i in links | filter: custom.search">

For a more comprehensive understanding of angular scopes, be sure to read through this informative post:

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

The reason behind this behavior lies in the quirks of Javascript's inheritance system. Essentially, you need to encapsulate your primitive values within an object (as shown in the code snippet below with the custom object). Each iteration of ng-repeat creates its own scope, causing the variable search to be created separately for each iteration instead of being shared among them.

You can explore this concept further by visiting the following Plunker:

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

<a href="" ng-click="custom.search=i.name;">

<div ng-repeat="i in links | filter: custom.search">

For a more comprehensive understanding of angular scopes, be sure to read through this informative post:

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 3

Answer №2

Instead of cluttering scripts with markup, you have the option to create a function:

$scope.filterItems = function(item){
    $scope.query = item;
};

After defining it, you can bind it like this:

<div ng-repeat="item in itemList">
   <a  href="" ng-click="filterItems(item.name)" > {{item.name }}  </a> 
</div>

Answer 4

Instead of cluttering scripts with markup, you have the option to create a function:

$scope.filterItems = function(item){
    $scope.query = item;
};

After defining it, you can bind it like this:

<div ng-repeat="item in itemList">
   <a  href="" ng-click="filterItems(item.name)" > {{item.name }}  </a> 
</div>

Filtering data with AngularJS upon user clicks

Answer №1

Answer №2

Similar questions

Using jQuery cookies to dynamically change the body id during page loading

Vue.js Components Facing Build Issues

CriOS unable to recognize OPTIONS request from Tomcat 8

Efficiently managing routes by segmenting them into distinct files

Emphasize the engaged menu selection when the page is refreshed

Discover the method for inserting a title attribute value into a span element

When the same component is conditionally rendered, it does not activate the mounted() hook

commitment to a cyclical data framework

Transferring a JavaScript variable to JSP using AJAX

Infinite scrolling with Jquery: Loading dynamic content seamlessly from external websites

Error: Attempting to create a Discord bot results in a TypeError because the property 'id' is undefined

The combination of Node.js module.exports and shorthand ternary operators for conditional statements

Issues with React's onSelect event functionality are persisting

Discovering the Essence of AngularJS Test Runner: Unraveling the

Issue with Google Maps API v3 controls appearing behind the map

Bug in timezone calculation on Internet Explorer 11

Transform static borders into mesmerizing animations by changing the solid lines to dotted lines using CSS

Finding the substring enclosed by two symbols using Javascript

Divide a given number of elements within an array of arrays

Link your 3D force graph node by attaching it