Почему именованный фильтр фильтра 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

Я полагаю, что фильтр будет искать строку во всех свойствах вашей задачи. Если, например, вы пытаетесь отфильтровать по названию, вы должны использовать что-то вроде этого

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

Если вы не добавите || '' к фильтру, задачи не будут отображаться при загрузке страницы. Надеюсь, это поможет, ура.

Документация для фильтра: https://docs.angularjs.org/api/ng/filter/filter