Issue with filtering (ngRepeat) in a table across multiple columns is not fully functional

Question

Issue with filtering (ngRepeat) in a table across multiple columns is not fully functional

I am looking to apply a filter on my table that is created using ng-repeat.

        <tbody>
            <tr ng-repeat="x in contact.listeContacts | filter:contact.searchText track by $index">
                <td>
                    <b>{{x.gd$name.gd$fullName.$t}}</b>
                </td>
                <td>
                    <p>{{contact.listeContacts[$index].gd$name.gd$familyName.$t}}</p>
                </td>
                <td>
                    <p>{{contact.listeContacts[$index].gd$name.gd$givenName.$t}}</p>
                </td>
                <td>
                    <p>{{contact.listeContacts[$index].gd$email[0].address}}</p>
                </td>
                <td>
                    <p>{{contact.listeContacts[$index].gd$phoneNumber[0].$t}}</p>
                </td>
                <td>
                    <p>{{contact.listeContacts[$index].gd$organization[0].gd$orgTitle.$t}}{{contact.listeContacts[$index].gd$organization[0].gd$orgName.$t}}</p>
                </td>
            </tr>
        </tbody>

My concern is that the filter I applied appears only on the first column of the table.

Let's consider these three objects for display:

obj1 = {
'name':'obj1',
'age':10
}

obj2 = {
    'name':'obj2',
    'age':1000
}

obj3 = {
    'name'='obj3',
    'age':100000
}

If my searchText is "obj3", the table shows something similar to this obj3 / 10

instead of obj3 / 100000

I am puzzled about why it is behaving this way.

EDIT: John Joseph, Xun Chao & tanmay assisted me in resolving my initial problem, you can refer to their answers.

Currently, I'm facing an issue where my search filter does not work as intended. Please take a look at this Plunker : https://plnkr.co/edit/SfaYdgVkSfhOdI5enpOd?p=preview

angularjs angularjs-ng-repeat

Answer 1

Answer №1

Although the answers provided are accurate, none have delved into the reason behind this occurrence. Filtering with "obj3" results in only one item being displayed in the ng-repeat, even though your contact.listeContacts array still contains a length of 3. Thus, when searching for the text of the third item (in this case, obj3), it attempts to display contact.listeContacts[0] because the filtered array consists of just one element.

There are two possible solutions:

Following the advice from previous responses, substitute x for contact.listeContacts[$index]
You can create a reference to the filtered array like so:
```
<tr ng-repeat="x in mycontacts = (contact.listeContacts | filter:contact.searchText) track by $index">
```
Replace contact.listeContacts[$index] with mycontacts[$index], which references the filtered array rather than the original array

Answer 2

Although the answers provided are accurate, none have delved into the reason behind this occurrence. Filtering with "obj3" results in only one item being displayed in the ng-repeat, even though your contact.listeContacts array still contains a length of 3. Thus, when searching for the text of the third item (in this case, obj3), it attempts to display contact.listeContacts[0] because the filtered array consists of just one element.

There are two possible solutions:

Following the advice from previous responses, substitute x for contact.listeContacts[$index]
You can create a reference to the filtered array like so:
```
<tr ng-repeat="x in mycontacts = (contact.listeContacts | filter:contact.searchText) track by $index">
```
Replace contact.listeContacts[$index] with mycontacts[$index], which references the filtered array rather than the original array

Answer 3

Answer №2

Instead of accessing the contact.listeContacts directly for the rest of the columns, try using the looped variable x. This could be causing the issue. Make the following change: replace contact.listeContacts[$index] with just x.

    <tbody>
        <tr ng-repeat="x in contact.listeContacts | filter:contact.searchText track by $index">
            <td>
                <b>{{x.gd$name.gd$fullName.$t}}</b>
            </td>
            <td>
                <p>{{x.gd$name.gd$familyName.$t}}</p>
            </td>
            <td>
                <p>{{x.gd$name.gd$givenName.$t}}</p>
            </td>
            <td>
                <p>{{x.gd$email[0].address}}</p>
            </td>
            <td>
                <p>{{x.gd$phoneNumber[0].$t}}</p>
            </td>
            <td>
                <p>{{x.gd$organization[0].gd$orgTitle.$t}}{{x.gd$organization[0].gd$orgName.$t}}</p>
            </td>
        </tr>
    </tbody>

Answer 4

Instead of accessing the contact.listeContacts directly for the rest of the columns, try using the looped variable x. This could be causing the issue. Make the following change: replace contact.listeContacts[$index] with just x.

    <tbody>
        <tr ng-repeat="x in contact.listeContacts | filter:contact.searchText track by $index">
            <td>
                <b>{{x.gd$name.gd$fullName.$t}}</b>
            </td>
            <td>
                <p>{{x.gd$name.gd$familyName.$t}}</p>
            </td>
            <td>
                <p>{{x.gd$name.gd$givenName.$t}}</p>
            </td>
            <td>
                <p>{{x.gd$email[0].address}}</p>
            </td>
            <td>
                <p>{{x.gd$phoneNumber[0].$t}}</p>
            </td>
            <td>
                <p>{{x.gd$organization[0].gd$orgTitle.$t}}{{x.gd$organization[0].gd$orgName.$t}}</p>
            </td>
        </tr>
    </tbody>

Answer 5

Answer №3

Instead of using contact.listeContacts[$index], ensure that you are using the correct variable...

        <tbody>
        <tr ng-repeat="x in contact.listeContacts | filter:contact.searchText track by $index">
            <td>
                <b>{{x.gd$name.gd$fullName.$t}}</b>
            </td>
            <td>
                <p>{{x.gd$name.gd$familyName.$t}}</p>
            </td>
            <td>
                <p>{{x.gd$name.gd$givenName.$t}}</p>
            </td>
            <td>
                <p>{{x.gd$email[0].address}}</p>
            </td>
            <td>
                <p>{{x.gd$phoneNumber[0].$t}}</p>
            </td>
            <td>
                <p>{{x.gd$organization[0].gd$orgTitle.$t}}{{x.gd$organization[0].gd$orgName.$t}}</p>
            </td>
        </tr>
    </tbody>

Answer 6

Instead of using contact.listeContacts[$index], ensure that you are using the correct variable...

        <tbody>
        <tr ng-repeat="x in contact.listeContacts | filter:contact.searchText track by $index">
            <td>
                <b>{{x.gd$name.gd$fullName.$t}}</b>
            </td>
            <td>
                <p>{{x.gd$name.gd$familyName.$t}}</p>
            </td>
            <td>
                <p>{{x.gd$name.gd$givenName.$t}}</p>
            </td>
            <td>
                <p>{{x.gd$email[0].address}}</p>
            </td>
            <td>
                <p>{{x.gd$phoneNumber[0].$t}}</p>
            </td>
            <td>
                <p>{{x.gd$organization[0].gd$orgTitle.$t}}{{x.gd$organization[0].gd$orgName.$t}}</p>
            </td>
        </tr>
    </tbody>

Answer 7

Answer №4

The issue here is related to the $index you are using to access your items. When your list is filtered using ng-repeat, the index property iterates over your filtered list.

To resolve this, simply utilize your local variable, which appears to be named x in your situation.

For a visual example, check out this codepen link:

<td>{{contact.name}}</td>
<td>{{contacts[$index].name}}</td> <!-- may not be the same -->

Answer 8

The issue here is related to the $index you are using to access your items. When your list is filtered using ng-repeat, the index property iterates over your filtered list.

To resolve this, simply utilize your local variable, which appears to be named x in your situation.

For a visual example, check out this codepen link:

<td>{{contact.name}}</td>
<td>{{contacts[$index].name}}</td> <!-- may not be the same -->

Issue with filtering (ngRepeat) in a table across multiple columns is not fully functional

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The navigation controller, responsible for updating navbar values, is only executed once

Creating dynamic captions in an Angular grid is an essential feature for enhancing the

AngularJS | Using ngAnimate to Display Form Validation Errors

Accessing Values from a Map Returned by Spring in an Angular Controller

Show ng-message when email is invalid in Angular Material without using ng-pattern

Having trouble selecting a default option in a dynamically populated select dropdown using ng-model in the dropdown

When using a service, AngularJS can experience issues when the code is minified

Node.js and Express.js are being used in conjunction with Angular to create a server-side controller that fetches all data. However, there seems to be an issue as the

Saving a revised JSON file using AngularJS

Mapping dynamic objects inside a repeat loop in AngularJS ui-select

Leverage Jasmine for testing a jQuery plugin

I'm finding it difficult to grasp the purpose of $inject within controllers

What is the best way to store all rows in a dynamically changing table with AngularJS?

Develop a feature within an Angular directive to implement a button that can delete the directive completely

Optimizing JavaScript performance by packaging files with Browserify

Utilizing the MEAN stack to establish a connection with a simulated data collection

Testing with karma/jasmine in AngularJS can lead to issues when there are conflicts between test

Organizing AngularJS controllers in separate files

Switching the input of data from a string format to a date format

Categorize elements in an array based on a specific keyword