How AngularJS filter and ng-model work in context of JavaScript?

Question

I'm trying to understand AngularJS ng-model directive and I found this link I'm not able to understand how filters are working internally. Actually its

Any: <input ng-model="search.$"> <br>
Name only <input ng-model="search.name"><br>
Phone only <input ng-model="search.phone"><br>

<tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
</tr>

When I remove first input box Any, and then convert second input box's model from search.name to search. Then its not working as expected.

Answer 1

Ok, let's take a look. You told: "When I remove first input box Any, and then convert second input box's model from search.name to search".

Do, we can see the following HTML:

Name only <input ng-model="search"><br>
Phone only <input ng-model="search.phone"><br>

<tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
</tr>

Now when you type anything in Name input - your table is filtered by all fields. In our case these fields are friendObj.name and friendObj.phone. It happens because you use string expression of search (take a look here, when expression is a String). In this moment your search variable is a string and you do not see any changes in the Phone input field because it's binded to the search.phone variable, but the last does not exist because search is not an object, and it does not contain phone field.

Now you try to type anything in the Phone field. In this moment your search variable becomes an object, something like that:

 search = {phone: 'YourText'}

Your table now is filtered by only friendObj.phone field. It happens because you use Object expression of search (the same link, when expression is an Object). Now you can see in the field Name text [object Object]. It happens because the Name field is binded to the search variable. But in this moment, as i told you, it's an Object and AngularJS tries to make a string from this object. As far as you know (i hope ;) ), when you try to modify Object to the primitive String - is called toString() function of object which returns [object Object] string.

Hope i anwered your question.