Struggling due to the malfunctioning of Angular filter

I'm having an issue with using Angular filters within the context of ng-repeat.

Take a look at my code snippet:

<ul id="testDiv2" class="dropdownH">
  <input type="text" placeholder="Keyword Filter" data-ng-model="search.category.category_name">
  <li data-ng-repeat="category in categories track by $index | filter: search.category.category_name" 
      data-ng-click="selectCategory($index)">
    <div class="colony pull-left">
      <span>{{category.category_name}}</span>
    </div>
    <div class="pull-right">
      <input type="radio" name="tag" />
      <label></label>
    </div>
  </li>
</ul>

The above code is giving me trouble. Interestingly, when I remove track by $index, it works just fine.

Any advice or suggestions on how to resolve this? Let me know!

javascriptangularjs

Answer №1

If you're encountering an issue with the track by expression, try using it after the filter.

For example:

data-ng-repeat="category in categories  | filter:search track by $index"

Check out this working demo:

angular.module("test",[]).
controller("testController",function($scope){
$scope.categories = [{category_name:'abc'},{category_name:'cde'}];

})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" >
<ul id="testDiv2" ng-controller="testController" class="dropdownH">
<input type="text" placeholder="Keyword Filter" data-ng-model="search">
<li data-ng-repeat="category in categories  | filter:search track by $index" data-ng-click="selectCategory($index)">
 <div class="colony pull-left"><span>{{category.category_name}}</span></div>
                                                        <div class="pull-right"><input type="radio" name="tag" /><label></label></div>

</li>
</ul>

Answer №2

After much searching, I finally discovered the answer.

This is what I needed to implement:

<li data-ng-repeat="category in categories | filter: search.category.category_name track by $index" data-ng-click="selectCategory($index)"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the dimensions of an image post-creation

let displayedImage = Ti.UI.createImageView({ image : somefile.png, height:'100', width:'100' }); The code above shows how I created the image. But now, I am wondering how I can resize the image after its initial creation. ...

javascriptimagetitanium

Retrieve the text label from the parent option group

Below is the HTML code snippet: <select id="categoryg"> <optgroup label="Main" value="binding"> <optgroup label="Sub" value="binding"> <option value="46&quo ...

javascriptjquery

"Using Sequelize's Op.and and Op.like operators led to an unexpected outcome of producing an empty

I am working on developing a search endpoint using express and sequelize. I noticed an issue where using Op.and in my 'where' object results in an empty object: const where = { [Op.and]: req.query.q.split(" ").map((q) => { ...

javascriptnode.jsexpresssequelize.js

Change from displaying web content to showing app content by utilizing Javascript

When using the mobile app, clicking on the user from the welcome screen redirects them to the next screen where a web-view is displayed through an API call. However, I am having trouble navigating back to the previous screen from this web view. It's ...

javascriptandroidjquery

Choosing the subsequent element that comes before

<tr class="main"></tr> <tr class="emails-details"> <button>some button</button> </tr> <tr class="main"></tr> <tr class="emails-details"> <button>some button</button> </tr> &l ...

javascriptjquerycss

Display or conceal a div element individually

My task involves modifying this code, which is the original version of a FAQ with three answers that can be toggled to show or hide on click. I need to revise it so that only one answer is displayed at a time and the others close. I received advice to us ...

javascriptarraysloops

Having Trouble with Form Submission Button Across Different Web Browsers

Having some trouble with my form - all fields are properly closed with tags, but when I click the submit button, nothing happens. The page is loaded with code, so here's the link for you to check it out. Unfortunately, right-click is disabled, so ple ...

phpjavascripthtml

div added on the fly not showing up

I'm attempting to dynamically add a div to a webpage using Chrome. Despite following several instructional guides, the code does not seem to be working as expected. I have added style attributes to make it more visible, but the element is not showing ...

javascript

Retain the Previously Selected Option in Angular 2 Dropdown

Looking for assistance with implementing a simple HTML select dropdown in Angular2 (TS) using the code below: <select id="pageSize" (change)="onPageSizeChanged($event, pagination.pageSize)"> <option value="10">10</option> <option ...

javascriptangulartypescriptselectdropdown

What is the recommended way to configure the build.gradle file for the app build process?

I am currently working on building the app using the command provided below. /android gradlew assembleRelease My main query at this point is whether it is necessary to eliminate the debug of signingConfigs and debug of buildTypes when transitioning into r ...

javascriptandroidreactjsreact-nativeandroid-studio

Access several different dynamic URLs through a single Ajax request

I have a scenario where I am showing multiple dynamic links within the same div. The first link works perfectly fine with ajax loading the content, but the subsequent links do not work. How can I make it so that the content of all links can be loaded withi ...

javascriptjqueryhtmlajax

What is the best approach to including files in addition to other data fields when calling a webmethod in asp.net using a jquery ajax request?

My webform contains a variable number of textboxes and dropdowns. To send data to the server-side webmethod, I am utilizing the following code: $.ajax({ type: "POST", url: "SupplierMaster.aspx/RegisterSupplier", data: JSON.stringify({ ...

javascriptc#jqueryasp.netajax

Error: The jasmine framework is unable to locate the window object

Currently, I am testing a method that includes locking the orientation of the screen as one of its functionalities. However, when using Jasmine, I encountered an error at the following line: (<any>window).screen.orientation.lock('portrait&apos ...

javascripttypescriptjasminewindow

Accessing the external function parameter inside of the $timeout function

Currently, I am using SockJS to listen to websocket events and receive objects that I want to insert into my $scope.mails.items array. The issue I am facing involves the code snippet below. For some reason, I am unable to pass the message parameter into my ...

javascriptangularjs

Save the output of my Java function into a JavaScript variable

I have created a web application using JSP, CSS and HTML. The page contains six buttons, each of which calls a JavaScript method. For instance, the first button triggers the par() method. <html> <head> <title>Welcome d To Student Unive ...

javajavascripthtmlcss

Increase the bottom padding or add some extra space to the Bootstrap form or page

I am currently working on enhancing a Bootstrap Form that includes reset/submit buttons positioned at the bottom. A common issue is when iPhone users attempt to click the Submit button, which initially displays Safari icons before requiring an extra tap to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enhancing Luxon DateTime with extension type support

Referencing the issue at https://github.com/moment/luxon/issues/260, I am looking to extend the DateTime object as shown below: import { DateTime } from 'luxon'; function fromUnix(tsp?: number): DateTime { return DateTime.fromMillis(tsp * 1000 ...

javascripttypescriptluxon

Utilizing React's useCallback with dependencies based on a function called within the callback

I've been working on a web application using React and came across an interesting implementation. Here's how it looks: const onAddNewAccount = useCallback(async () => { await refetch(); setOtherState((prev) => {...}); }, [refetch]); ...

javascriptreactjstypescriptreact-hooks

Issue with JSON data not functioning properly in AJAX request

I have been facing an issue with detecting whether a database entry has been successfully input. I am sending the new inserted ID and a JSON variable to an AJAX call, which works fine in all browsers but not in phonegAP. Despite that, the data is being suc ...

javascriptjqueryajaxjsoncordova

Why does the variable's value reset to empty when leaving the function?

I encountered an issue with my api request that is included in a function within my Service script. Despite defining the variable "curruser" outside of the function to retain its value, I noticed that it becomes empty after exiting the script. services.js ...

javascriptangularjshttpionic-framework