Question

我想过滤使用ng-repeat生成的表格。

＆＃13;

        <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>

＆＃13;

我的问题是我的过滤器似乎只应用于第一列。

想象一下，我要显示这三个对象：

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

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

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

如果我的searchText是＆＃34; obj3＆＃34;，则表格会显示如下obj3 / 10

而不是obj3 / 100000

我不明白为什么会这样。

编辑： John Joseph，Xun Chao＆amp; tanmay帮助我解决了我的第一个问题，检查了他们的答案。

现在，我不明白为什么我的搜索过滤器没有按预期工作。请参阅此Plunker：https://plnkr.co/edit/SfaYdgVkSfhOdI5enpOd?p=preview

Answer 1

您正在直接访问其余列的contact.listeContacts而不是循环变量x。那应该是问题所在。请尝试以下操作，将contact.listeContacts[$index]替换为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 2

您使用了contact.listeContacts [$ index]而不是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 3

您的问题在于您用于访问商品的$index。每当您ng-repeat中的列表被过滤时，index属性就会在过滤的列表中循环播放。

您只需使用名为x的本地变量。

有关实例，请参阅this codepen：

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

Answer 4

虽然所有提供的答案都是正确的，但没有一个人解释了为什么会这样。当您使用“obj3”进行过滤时，它只显示ng-repeat中的一个项目，但您的contact.listeContacts数组的长度仍然为3.因此，在搜索第三个项目的文本时（此处{{ 1}}），它试图显示obj3因为过滤后的数组只有一个元素。

您有两种方法可以解决这个问题：

正如所有其他答案所述，请contact.listeContacts[0]代替x
您可以像这样引用已过滤的数组：

contact.listeContacts[$index]

然后，您可以使用<tr ng-repeat="x in mycontacts = (contact.listeContacts | filter:contact.searchText) track by $index">代替contact.listeContacts[$index]而不是实际数组

在不适用于所有列

4 个答案: