AngularJS 中的实时搜索：更新结果

Question

我想要实时搜索：结果是从 web api 查询的，并随着用户输入而更新。

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

是否有更简单的方法来至少避免这种闪烁，并且可能有可能使更改动画化？

现在看起来是这样的：

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>

控制器：

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 设置那些类的样式，这样它们就不会闪烁。

Answer 2

另一种方法是使用 angular-ui bootstrap Typeahead component（检查 post 的底部）。它有一个以毫秒为单位的提前等待属性，还有一个用于自定义它的模板url。

Answer 3

<div ng-app>
    <div ng-controller="MyController">
        <input type="search" ng-model="search" placeholder="Search...">
        <button ng-click="fun()">search</button>
        <ul>
            <li ng-repeat="name in names">{{ name }}</li>
        </ul>
        <p>Tips: Try searching for <code>ann</code> or <code>lol</code>

        </p>
    </div>
</div>



function MyController($scope, $filter) {
    $scope.names = [
        'Lolita Dipietro',
        'Annice Guernsey',
        'Gerri Rall',
        'Ginette Pinales',
        'Lon Rondon',
        'Jennine Marcos',
        'Roxann Hooser',
        'Brendon Loth',
        'Ilda Bogdan',
        'Jani Fan',
        'Grace Soller',
        'Everette Costantino',
        'Andy Hume',
        'Omar Davie',
        'Jerrica Hillery',
        'Charline Cogar',
        'Melda Diorio',
        'Rita Abbott',
        'Setsuko Minger',
        'Aretha Paige'];
    $scope.fun = function () {
        console.log($scope.search);
        $scope.names = $filter('filter')($scope.names, $scope.search);
    };
}

AngularJS 中的实时搜索：更新结果

Live search in AngularJS: updating the results

angularjs

angularjs-ng-repeat

angularjs-animation