用AngularJS手動觸發輸入字段上的更改事件

Question

我正在玩Angular JS，並且有一個小博客源，其中有一個輸入字段，用於過濾顯示的內容。現在，我已經構建了自己的「buzz雲」（或任何單詞），並試圖實現它，以便當單擊其中一個單詞時，更新輸入字段將使列表過濾器正確。

但是，當我設置我的輸入字段的值時，其上的更改事件不會觸發。所以我嘗試用jQuery手動觸發它 - 仍然不起作用。下面

代碼：

<aside> 
<div class="filters"> 
    Search: <input id="searchField" ng-model="query"> 
</div> 
<div class="buzz"> 
    <h3>Buzz</h3> 
    <li ng-repeat="(key, value) in buzz" class="thumbnail"> 
     <a href="" style="font-size:{{value*10}}px" onclick="$('#searchField').val('{{key}}'); $('#searchField').trigger('change'); ">{{key}}</a> 
    </li> 
</div> 
</aside> 

Answer 1

你應該設置使用輸入的NG-模型NG點擊：

<a href="" style="font-size:{{value*10}}px" ng-click="query=key">{{key}}</a> 

在你的榜樣，你是使用jQuery這是angularjs世界之外，所以當你改變它時它不會觸發新模型的計算。

Answer 2

在使用AngularJS時，不應該使用jQuery來操作DOM。相反，在基於AngularJS的點擊處理程序中修改範圍變量以影響更改。

在這種情況下，一個棘手的情況是，您在ngRepeat的範圍內設置原始值，由於JavaScript執行原型繼承的方式會導致意外的結果。見this Stack Overflow answer更多的細節，但在這個例子中，以修復，我們將創建要在其上附加query值的對象：

<aside> 
<div class="filters"> 
    Search: <input id="searchField" ng-model="data.query"> 
</div> 
<div class="buzz"> 
    <h3>Buzz</h3> 
    <li ng-repeat="(key, value) in buzz" class="thumbnail"> 
     <a href="" style="font-size:{{value*10}}px" ng-click="data.query = key">{{key}}</a> 
    </li> 
</div> 
</aside> 

Answer 3

你不應該使用jQuery具有角exept一些指令。總有一個更好的方法來做到這一點。如果您使用範圍值，請不要忘記使用ng樣式，因爲如果更改{{value}}，IE將不會更改任何內容。

<aside> 
    <div class="filters"> 
     Search: <input id="searchField" ng-model="query"> 
    </div> 
    <div class="buzz"> 
     <h3>Buzz</h3> 
     <li ng-repeat="(key, value) in buzz" class="thumbnail"> 
      <a href="#" ng-style="'font-size': value*10 + 'px'" ng-click="query = key">{{key}}</a> 
     </li> 
    </div> 
    </aside> 

編輯

好了，現在我發現了什麼是錯誤的表達。當我們在ng-repeat中調用查詢時，它會創建一個新的作用域，因此我們需要將新值賦給父作用域。你也忘了tu把<ul>換成<li> s。

我創建了一個Plunker來演示它。

<aside> 
<div class="filters"> 
    Search: <input id="searchField" ng-model="query"> 
</div> 
<div class="buzz" ng-init="buzz = {'size': 2, 'size2': 4}"> 
    <h3>Buzz</h3> 
    <ul> 
    <li ng-repeat="(key, value) in buzz" class="thumbnail"> 
     <a href="#" ng-style="{'font-size': value*10 + 'px'}" ng-click="$parent.query = key">{{key}}</a> <!-- EDIT need to add $parent to query --> 
    </li> 
    </ul> 
</div>