如何模擬輸入中的鍵入以使角度過濾器起作用

Question

例如，我有國家列表<div class="container" ng-init=" countries=['Ukraine','Urugvai','Russia','Romania','Rome','Argentina','Britain'] "> ，然后通過ng-repeat顯示它們：

  <ul>
    <li ng-repeat="country in countries | filter:q">{{ country }}</li>
  </ul>

然后輸入過濾信息：

<input id="q" type="text" ng-model="q"/>

另外，我有字母列表：

<ul>
  <li class="letter">A</li>
  <li class="letter">B</li>
  <li class="letter">R</li>
  <li class="letter">U</li>
</ul>

我打算做的是，當我單擊.letter時得到一封信，並將其輸入以開始過濾我的國家列表：

$(document).on('click','.letter',function(){
  var el = $(this);
  var html = el.html();
  var firstLetter = html.charAt(0);
  $('#q').val(firstLetter);
});

因此，當我單擊字母時，它將把這個字母並放入輸入字段中。 但是隨后什么也沒發生...單擊的字母顯示在輸入字段中，但過濾器不起作用。

所以我的問題是，如何使它起作用？ 當我輸入字母時，如何模擬輸入字段中的輸入？

非常感謝！

PS這是我的Plunker演示

Answer 1

解釋和解決方案＃1（錯誤）

什么都沒發生，因為您從未告訴過Angular模型已更改。 您正在Angular“ world”之外使用plain Javascript。 在這種情況下，您需要手動更新范圍並觸發摘要循環：

$(document).on('click', '.letter', function() {
    var el = $(this);
    var html = el.html();
    var x = 'some';
    var firstLetter = html.charAt(0);
    //alert(firstLetter);
    $('#q').val(firstLetter);


    var scope = angular.element($('#q')[0]).scope();
    scope.q = firstLetter;
    scope.$apply();
});

警告：但這不是您應該這樣做的方式，請務必避免這樣做。

解決方案2（更好）

而是使用ngClick指令更新q模型，您的代碼將變得更加整潔。

在HTML中，您將放置ngClick指令：

<ul>
    <li class="letter" ng-click="setTerm('A')">A</li>
    <li class="letter" ng-click="setTerm('B')">B</li>
    <li class="letter" ng-click="setTerm('R')">R</li>
    <li class="letter" ng-click="setTerm('U')">U</li>
</ul>

並在控制器中：

app.controller('MainController', function($scope) {
    $scope.setTerm = function(letter) {
        $scope.q = letter;
    };
});

演示： http ： //plnkr.co/edit/N0DpH9kNTndo498eempF？p = preview

但是，即使這看起來更接近Angular樣式的解決方案，由於您需要在每個LI元素上復制ngClick處理程序，因此它仍然不是理想的選擇。 在這里，我們找到了解決該問題的最佳解決方案-自定義指令，這是Angular的關鍵思想之一。

解決方案3（最佳）

您可以創建自定義指令，以避免為每個列表項編寫相同的ngClick處理程序。 它不僅太冗長，而且效率較低，因為每個ngClick都綁定新的click事件。

簡單的指令可能看起來像這樣：

app.directive('searchList', function() {
    return {
        scope: {
            searchModel: '=model'
        },
        link: function(scope, element, attrs) {
            element.on('click', attrs.searchList, function() {
                scope.searchModel = $(this).text();
                scope.$apply();
            });
        }
    };
});

並以這種方式使用：

<ul search-list=".letter" model="q">
    <li class="letter">A</li>
    <li class="letter">B</li>
    <li class="letter">R</li>
    <li class="letter">U</li>
</ul>

這非常靈活（可以與不同模型一起使用並可以重復使用，可以與列表中有限的一組項目一起使用（CSS選擇器））和高效的解決方案（僅一個事件處理程序）。

演示： http ： //plnkr.co/edit/rZrPheCy6FToWsPRLgAV

Answer 2

如果您使用的是反應式表單，請嘗試FormControl.updateValueAndValidity()