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 ブートストラップ Typeahead コンポーネントを使用することです(投稿の下部を確認してください)。ミリ秒単位の type-ahead-wait プロパティと、それをカスタマイズするためのテンプレート 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 に答える