What is the best way to monitor the elements within ngRepeat in AngularJS?

Question

What is the best way to monitor the elements within ngRepeat in AngularJS?

Hello everyone,

I am facing a minor issue that I seem unable to resolve. I have a search input field that allows users to search through a table in all columns. However, I am struggling to track the items in ngRepeat effectively.

Below is the search input field:

<div>
  <input type="search" ng-model="searchText" />
</div>

And here is the table using ngRepeat:

...
<tr ng-repeat="item in filtered = (persons | filter:searchText track by item.name)">
   <td>{{ item.id }}</td>
   <td>{{ item.name }}</td>
</tr>
...

If anyone has a solution to my problem, I would greatly appreciate it! :)

javascript angularjs tracking

Answer 1

Answer №1

It seems that you don't need to use track by, as simply applying the filter directive should suffice

<tr ng-repeat="item in persons | filter:{ name: searchText} ">

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.persons = [{
      name: 'a',
      id: 1
    }, {
      name: 'aa',
      id: 2
    }, {
      name: 'aaaa',
      id: 3
    }, {
      name: 'aaaaa',
      id: 4
    }, {
      name: 'aaaaaa',
      id: 5
    }, {
      name: 'aaaaaaa',
      id: 6
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    <input type="search" ng-model="searchText" />
  </div>
  <table>
    <tr ng-repeat="item in persons | filter:{name:searchText}">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </table>
</div>

Answer 2

It seems that you don't need to use track by, as simply applying the filter directive should suffice

<tr ng-repeat="item in persons | filter:{ name: searchText} ">

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.persons = [{
      name: 'a',
      id: 1
    }, {
      name: 'aa',
      id: 2
    }, {
      name: 'aaaa',
      id: 3
    }, {
      name: 'aaaaa',
      id: 4
    }, {
      name: 'aaaaaa',
      id: 5
    }, {
      name: 'aaaaaaa',
      id: 6
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    <input type="search" ng-model="searchText" />
  </div>
  <table>
    <tr ng-repeat="item in persons | filter:{name:searchText}">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </table>
</div>

What is the best way to monitor the elements within ngRepeat in AngularJS?

Answer №1

Similar questions

Preventing ngclass animation in Angular 1.2 from running when re-compiled

Guide on setting up global typing for AngularJS in your project

Adding a dynamic key-value pair object to an array using the JS push method

Select from a list to save

JavaScript comparing variables to nested object properties

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

Achieving a collapsing navbar on click in Bootstrap 5

Troubleshooting three.js exceeding 2-minute load times and crashing issues

The privateroute is throwing an error because it cannot access the property state since

spontaneous angular rotations in a constantly shifting CSS environment

The confirm() function shows up before the background on a blank layout

Loop through the elements retrieved by the `getElementsByName` method in

Oops! There seems to be a problem with inserting an image using

The Problem with AJAX Error Handling Customization

Leveraging route configuration's scope in HTML

Tips for identifying a scroll down gesture on a touch device with jQuery

What is the best way to assign three different dates in my protractor test?

Encountering Error 1 in Cordova File Transfer with Laravel Framework

Animate images using mouse vertical movement

How can I implement disabling buttons for specific IDs in React?