4

次の Angularjs スニペットでは、デフォルトでテーブル全体が表示され、入力を開始するとフィルタリングされます。

  1. デフォルトで結果を表示せず、少なくとも 3 つの結果が検索クエリに一致した後にのみ結果を表示するように変更するには、どのようなベスト プラクティスがありますか?

  2. おまけの質問ですが、最低 2 文字が入力された場合にのみ結果を表示するにはどうすればよいですか?

HTML :

<div ng-app="myApp">
    <div ng-controller="PeopleCtrl">
        <input type="text" ng-model="search.$">
        <table>
            <tr ng-repeat="person in population.sample | filter:search">
                <td>{{person.name}}</td>
                <td>{{person.job}}</td>
            </tr>
        </table>
    </div>
</div>

Main.js :

var myApp = angular.module('myApp', []);
myApp.factory('Population', function () {
    var Population = {};
    Population.sample = [
        {
            name: "Bob",
            job: "Truck driver"
        }
        // etc.
    ];
    return Population;
});

function PeopleCtrl($scope, Population) {
    $scope.people = Population;
}
4

1 に答える 1

7

実際、マークアップでそのすべてを行うことができます...これは、デモンストレーションするプランクです

マークアップの変更点は次のとおりです。

<input type="text" ng-model="search">
<table ng-show="(filteredData = (population.sample | filter:search)) && filteredData.length >= 3 && search && search.length >= 2">
    <tr ng-repeat="person in filteredData">
        <td>{{person.name}}</td>
        <td>{{person.job}}</td>
    </tr>
</table>

編集:あなたの要求を反映するように私の答えを変更しました。

于 2013-02-04T14:26:40.767 に答える