3

我想要一个实时搜索：从web 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>

和控制器：

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

3 回答 3

2

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

于 2015-04-26T21:24:53.460 回答
0

做你需要的另一种方法是使用angular-ui bootstrap Typeahead 组件（检查在帖子的底部）。它有一个以毫秒为单位的预先输入等待属性，还有一个用于自定义它的模板 url。

于 2015-04-26T21:26:49.697 回答
-1 
<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);
    };
}
于 2015-04-29T08:13:28.953 回答