angularjs - AngularJS 中的实时搜索 : updating the results

Question

我想要实时搜索:从网络 API 查询结果并根据用户输入进行更新。

问题在于，即使结果列表保持不变，列表也会闪烁，并且“无结果”文本会出现几分之一秒。我想我需要使用特殊代码删除和添加项目来避免这种情况，计算数组之间的差异等。

有没有一种更简单的方法来至少避免这种闪烁，并且可能有可能对变化进行动画处理？

现在看起来像这样:

html部分是:

    <div class="list-group">
        <a ng-repeat="test in tests track by test.id | orderBy: '-id'" ng-href="#/test/{{test.id}}" class="list-group-item">
            <h4 class="list-group-item-heading">{{test.name}}</h4>
            {{test.description}}
        </a>
    </div>
    <div ng-show="!tests.length" class="panel panel-danger">
        <div class="panel-body">
            No tests found.
        </div>
        <div class="panel-footer">Try a different search or clear the text to view new tests.</div>
    </div>

Controller :

testerControllers.controller('TestSearchListCtrl', ['$scope', 'TestSearch',
function($scope, TestSearch) {
    $scope.tests = TestSearch.query();
    $scope.$watch('search', function() {
        $scope.tests = TestSearch.query({'q':$scope.search});
    });
}]);

Answer 1

您应该使用ng-animate模块来获取平滑动画所需的类。对于移动、添加或删除的每个 ng-repeat 项目 - Angular 将添加特定的类。然后您可以通过 CSS 或 JS 设置这些类的样式，这样它们就不会闪烁。