为什么 angularjs 过滤器的命名过滤器不适用于第一个元素？

Question

我是角度方面的新手。我在列表中添加了一个过滤器，以尝试仅显示与我的过滤器文本匹配的值。它工作正常，除了第一个 todo.title。

如果我有待办事项：e、f、g、gf：输入 e 并没有改变任何东西，但输入 f 会显示 f 和 gf。我列表中的第一个待办事项总是看起来像这样。

你知道为什么吗？

在我的 html 中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<form id="todo-form" ng-submit="addTodo()">
    <input id="new-todo" placeholder="Que devez-vous faire ?" ng-model="newTodo" />
    <button class="btn btn-info" ng-click="addTodo()">Ajouter la tâche</button>
</form>
<article ng-show="todos.length">
    <p><strong><u>Les tâches en cours</u> :</strong></p>
    <p><strong><u>Recherche</u> : </strong><input type="text" ng-model="test"></p>
    <ul id="todo-list">
        <li ng-repeat="todo in todos  | filter : test | orderBy:'title'" ng-class="{completed: todo.completed}">
            <div class="view">
                <span>{{todo.title}}</span>
                <span class="close" ng-click="removeTodo(todo)">x</span>
            </div>
        </li>
    </ul>
</article>

当我在输入中输入 a 时，c、d 和其他必须消失。但这里没有。

Answer 1

我相信过滤器会在你的 todo 的所有属性中搜索字符串。例如，如果您尝试按标题进行过滤，您应该使用类似这样的内容

<li ng-repeat="todo in todos  | filter:{title: test || ''} | orderBy:'title'" ng-class="{completed: todo.completed}">

如果您不将|| '' 添加到过滤器中，则待办事项将不会在页面加载时显示。希望对你有帮助，干杯。

过滤器文档：https://docs.angularjs.org/api/ng/filter/filter