angularjs - 如何在没有用户输入的情况下更新 AngularJS 中的过滤列表

Question

我正在使用过滤器，当用户在输入框中键入时，一切正常。我想要的是通过代码更新过滤结果（例如清除查询），而无需用户输入。我试图触发更改事件或简单地清除输入字段的值，但没有任何成功。

这是我最简单的 HTML

<div ng-app ng-controller="test">    
    <input type="text" ng-model="query" placeholder="search..">
    <button>Clear</button>
    <ul class="unstyled">
        <li ng-repeat="item in list | filter:query">
            {{item}}
        </li>
    </ul>
</div>

这是JS：

function test($scope) {
    $scope.list = [120, 566, 777, 889, 998, 332, 112, 440, 881];

    $('button').click(function() {
        $('input').val('');
    });
}

JSFiddle

在不使用键盘删除输入内容的情况下，我可以做些什么来取消过滤结果，但是通过代码来做（比如点击清除按钮）？

Answer 1

不要通过 jQuery 注册您的事件处理程序，让我们ng-click为您处理。

<button ng-click="clearBox()">Clear</button>


function test($scope) {
    $scope.list = [120, 566, 777, 889, 998, 332, 112, 440, 881];

    $scope.clearBox = function(){
      $scope.query = "";
    };
}

更新的小提琴