AngularJS filtering text is a powerful tool for modifying and refining

Here is the code for my simple searchController:

testapp.controller("searchController", function($scope, $rootScope, $http, $location) {

    $scope.filterText = null;

    var load = function() {
        console.log('call load()...');

        var url = 'product.json';

        if($rootScope && $rootScope.appUrl) {
            url = $rootScope.appUrl + '/' + url;
        }
        console.log(url);

        $http.get(url)
        .success(function(data, status, headers, config) {
            $scope.product = data;
            angular.copy($scope.product, $scope.copy);
        });
    }

    load();

}); 

In the view, I have declared a filterText variable and it looks like this:

<div class="container main-frame" ng-app="testapp"
    ng-controller="searchController" ng-init="init()">
    <h1 class="page-header">Products</h1>
    <!-- Filter Start -->
    <div class="search-box row-fluid form-inline">
        <label>Filter: </label> <input type="text" ng-model="filterText" /> 
    </div>
    <div class="results-top"></div>
    <!-- Filter End -->
    <table class="table">
        <thead>
            <tr>
                <th width="25px">ID</th>
                <th>TITLE</th>
                <th>PRICE</th>
                <th>Description</th>
                <th width="50px"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="p in product track by p.id | filter: filterText">
                <td>{{p.id}}</td>
                <td>{{p.title}}</td>
                <td>{{p.price}}</td>
                <td>{{p.description}}</td>
            </tr>
        </tbody>
    </table>
    <!-- ng-show="user.username" -->
    <p>
</div>

I am facing an issue where nothing happens when I input text into the filter. Any suggestions on how to resolve this problem?

Your help is appreciated!

Answer №1

There seems to be an issue related to the track by expression.

To resolve this, consider adding track by at the end of the ng-repeat:

<div ng-repeat="item in items | filter: search track by item.id">

If necessary, you can also remove track by altogether.

I have created a JSFiddle with the correct code for reference:

JSFiddle

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

Getting an HTML element from a different HTML document and showcasing it in the current document: A Complete Guide

Currently, I am in the process of developing a website where users can submit requests and receive responses from others. To streamline this process, I have designed an app-like form to gather necessary information. This form consists of 3 pages that need ...

An unhandled error occurred when trying to call _this3.setState - it seems like _this3 is not a

I encountered an error when trying to set the data in state in reactjs. Here's the scenario: I am passing data from a child component to a parent component. In the child component, I call the parent function and change the state value using setState. ...

Unexpected outcomes in linq.js

Hey there, I have a JSON object named "Faults" that looks like this: "Faults":[{"RoomId":1,"ElementId":173,"FaultTypeId":1,"Count":1,"Remark":""},{"RoomId":3,"ElementId":211,"FaultTypeId":7,"Count":1,"Remark":""},{"RoomId":4,"ElementId":173,"FaultTypeId": ...

Adding Conditionally Specified Properties to a Parameterized TypeScript Interface Based on Type

Encountering a challenge with TypeScript where I need to selectively add properties to a generic interface depending on the type parameter. Let me explain further with an example: Consider two interfaces, A and G<T>: interface A { IA: string; } ...

What is the best way to manage errors when making a 'get' request during runtime?

In my AngularJS project, I am utilizing the $http service to send a get request to a specific URL. $http.get(url). success(function(data){ ... // saving data to localStorage }). error(function(){ ... // retrieving data from localStor ...

Magnify novice mistakes: Unhandled promise rejection and Ensure every child has a distinct "key" property

Currently, I am working through Amazon's Getting Started with AWS tutorial found here: https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-four/ After successfully building and hosting the app on git, I noticed that ...

Steps to make the placeholder in an MUI TextField component move to the top of the box instead of staying within the border:

I'm working on styling a text field in MUI to achieve the look shown in the image below: https://i.sstatic.net/JHhpf.png However, my current implementation looks like this: https://i.sstatic.net/5N7hH.png Currently, when I click inside the text fi ...

The message will not appear to indicate whether the room is valid or not

Take a look at this create_session.php application: Application Upon opening the application, you will encounter a CourseId textbox. Enter 'info101' in the textbox and click submit. You should see all the features listed below. Without entering ...

Unable to retrieve information from a child component in React

So, this component acts as the main container class TaskList extends React.Component { state = { task: '', } handleTaskClick = () => { taskArray.push({id: idCount, text: this.state.task, completed: false}) idCount++ this. ...

What is the best way to trigger an AJAX request when a user navigates away from a webpage or closes the

The Challenge at Hand Greetings, I am currently developing a database-driven game that involves users answering questions and earning the right to change the question by providing the correct answer. However, I have encountered a significant issue which ...

Need assistance with the JavaScript code, as it is not functioning as intended. Further details have been provided in the body for reference

I have developed a game code The gameplay starts by clicking on the "Start Game" button: fruits begin to drop, and when you hover over the falling fruit, it explodes, increasing your score by +1. If you miss 3 fruits, the "Game Over" screen appears along ...

What is the mechanism behind the fallthrough behavior when using express.static()?

Hey there, I have a simple express setup like this: const path = require("path"); const express = require("express"); const app = express(); app.use(express.static(path.join(__dirname, "public"))); app.get("/", (r ...

Only the initial setInterval function is currently active, despite multiple being set simultaneously

I am currently working on developing a webpage with a dynamic background featuring moving clouds. The code I have written for this project utilizes jQuery as shown below. browserWidth = 0; browserHeight = 0; clouds = 4; cloudSpeed = 50; $(function() { ...

When altering a single scope variable in AngularJS, the effect cascades to impact other scope variables as well

After uploading my code on fiddle, I noticed that changes made to the myAppObjects variable also affect another variable. Here is the link to the code: https://jsfiddle.net/owze1rcj/ Here is the HTML part of the code: <div ng-controller="MyCtrl"&g ...

The Mysteries of Key Codes in JavaScript

I'm curious about the character codes used for keyboards. Recently, I came across an informative article discussing this topic. In particular, I am interested in finding out which key code to use when a user presses both the alt and down arrow keys s ...

Is there an error when trying to show text and images using an HTML model after clicking a button?

How can I modify this code to have multiple buttons, each displaying a different modal when clicked? The current code only works for a single button and modal. <!DOCTYPE html> <html> <head> <meta ...

Tips for creating an Angular custom directive that wraps an input element within the template

Attempting to create an angular directive that generates a label, input field, and validation code is causing some unexpected behavior. Initially, I hardcoded the directive to include ng-minlength on the input element. This resulted in the model failing t ...

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

Cookie cannot be established following an ajax call

After completing some ajax requests, I am attempting to set a cookie using js-cookie.js. However, when I place the code snippet below inside the success function: Cookies.set('cookieName',object) var cookie = Cookies.get('cookieName') ...

Getting js.map Files to Function Properly with UMD Modules

I am experiencing an issue with debugging TypeScript files in Chrome and Firefox. Specifically, when trying to debug the MapModuleTest.ts file, the debugger seems to be out of sync with the actual JavaScript code by two lines. This discrepancy makes settin ...