AngularJS過濾器和ng模型如何在JavaScript環境下工作？

我想了解AngularJS ng模型指令，我發現this link 我無法理解過濾器如何在內部工作。其實它AngularJS過濾器和ng模型如何在JavaScript環境下工作？

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>

當我刪除第一輸入框中的任何，然後轉換成第二個輸入框的模式從search.name進行搜索。然後它不按預期工作。

來源

2014-09-01 Zubair Alam

好的，讓我們來看看。您告訴：「當我刪除第一個輸入框Any時，然後將第二個輸入框的模型從search.name轉換爲搜索」。

做的，我們可以看到下面的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>

現在，當您在名稱輸入任何內容輸入 - 你的表是由各個領域的過濾。在我們的情況下，這些字段是friendObj.name和friendObj.phone。發生這種情況是因爲您使用字符串表達式搜索（看看here，當expression是字符串）。在這一刻，您的search變量是一個字符串，您看不到電話輸入字段中的任何更改，因爲它綁定到search.phone變量，但最後一個不存在，因爲search不是對象，它不包含phone領域。

現在您嘗試在電話字段中輸入任何內容。在這一刻你的search變量成爲一個對象，類似的東西：

 search = {phone: 'YourText'}

你的表現在只被 friendObj.phone字段過濾。這是因爲您使用對象表達式搜索（ the same link， expression是對象）。現在你可以在現場看到名稱文本 [object Object]。這是因爲名稱字段綁定到 search變量。但在這一刻，正如我告訴你的，這是一個對象，而AngularJS試圖從這個對象中創建一個字符串。據你所知（我希望;）），當你試圖修改 Object到原始 String - 被稱爲 toString（）對象的函數返回 [object Object]字符串。

希望我解答了您的問題。

來源

2014-09-02 23:55:15 ababashka

AngularJS過濾器和ng模型如何在JavaScript環境下工作？

回答

相關問題