1

そのため、検索を制限したいいくつかのパラメーターを持つ検索ボックスがあります。これには、私の例では姓と名が含まれます。

私が達成しようとしていること

だから私はこれをそのように実装しようとしてきました。これは、ドロップダウン リストのコードです。

<select id="usersearchby" ng-model="searchFilter" ng-change="selectAction()">
        <option>Search By ...</option>
        <option value="lastName">Last Name</option>
        <option value="firstName">First Name</option>
</select>

これは、入力検索フィールドのコードです。

<input type="search" ng-if="searchFilter != 'firstName' && searchFilter != 'lastName'" ng-model="searchText">
<input type="search" ng-if="searchFilter == 'firstName'" ngModel="searchText.first_name">
<input type="search" ng-if="searchFilter == 'lastName'" ngModel="searchText.last_name">

これは、結果が表示される div のコードです。

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: searchText">

このコードは機能しませんが、たとえば first_name (条件付き入力なし) の入力検索ボックスが 1 つしかない場合は、問題なく機能します! 私は何を間違っていますか？これを行うより良い方法はありますか？

私が扱っているjsonデータのサンプル:

[{"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":1,"fax":"135–678-6357","first_name":"John","email":"user1@gmail.com","username":"user1"},     {"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":2,"fax":"135–678–6357","first_name":"Jane","email":"user22@gmail.com","username":"user2"}]
4

3 に答える 3

2

3 つのテキスト ボックスを使用する代わりに、1 つを使用してコントローラーでフィルター関数を使用する方がはるかに優れています。これは、ng-repeat のフィルターによって使用されます。

<input type="search" ng-model="searchText"/>

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: filterUsers(searchText, searchFilter)">
        {{user.first_name + ' ' + user.last_name}}
</div>

$scope.filterUsers = function(searchText, searchFilter) {
    if (searchFilter === 'firstName') {
      return function (user) { return user.first_name.match(searchText); }
    }
    else if (searchFilter === 'lastName') {
      return function (user) { return user.last_name.match(searchText); }
    }
    else {
      return function (user) { return user.first_name.match(searchText) || user.last_name.match(searchText); }
    }
};

http://plnkr.co/edit/vYlBLiF555JLpwlnZIPR?p=preview

于 2014-12-08T09:32:11.403 に答える
1

複数の検索テキストを処理するために、この難しい方法を行っているのではないかと思います。しかし、これを行う方法を示すためにplunkrを配置しただけですが、パラメーターの数が帯域幅を超えた場合、私の考えは手に負えなくなる可能性があります

基本的に私がしていることは、フィルターを適用する必要がある状態を設定することです

クエリ テキストが変更されたら、AND 条件を使用して条件を組み合わせたフィルターを適用する必要があります。

チェックボックスの基本設定は以下のとおりです

  $scope.shouldSearchWithFName = false;
  $scope.shouldSearchWithLName = false;
  $scope.searchText = "";

Plunkr http://plnkr.co/edit/nFV9s4XDrXGcmUYUPm8n?p=preview

于 2014-12-08T07:22:18.833 に答える