Why The angularjs filter's named filter don't work with the first element?

Question

Im a new in angular. I added a filter to an list to try to show only values that match my filter text. It work fine, except with the first todo.title.

if I have todos: e, f, g, gf : typing e did not change anything, but typing f will show f and gf. that is always look like this for the first todo in my list.

Do you know why?

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

when I put a in the input, c, d and other must disappear. But not here.

Answer 1

I belive the filter will search the string in all the properties of your todo. If, for example, you are trying to filter by the title, you should use something like this

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

If you don't add || '' to the filter, the todos won't show up when the page is loaded. Hope it helps, cheers.

Documentation for the filter: https://docs.angularjs.org/api/ng/filter/filter