Question

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

问题是列表闪烁，并且没有结果＆＃34;即使结果列表保持不变，文本也会显示一小段时间。我想我需要删除并添加带有特殊代码的项目以避免这种情况，计算数组之间的差异等等。

是否有更简单的方法可以避免这种闪烁，并且可能有可能为更改设置动画？

现在看起来像这样：

How live search looks like

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（请在帖子底部查看）。它有一个以毫秒为单位的提前等待属性，还有一个用于自定义它的模板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中实时搜索：更新结果

3 个答案: