選択ボックスに一致が見つからない場合は、フィルターをリセットします

サニー

選択ボックスでの選択に基づいてテーブルに結果を表示するフィルターを作成しようとしています。

また、デフォルトでは、「都市」選択ボックスは、私がつかんで設定しているユーザーの場所を設定しますng-init="my.city='${city}'"したがって、デフォルトの結果はユーザーの場所に基づいてフィルタリングされます。

私が抱えている唯一の問題は、ユーザーの場所が[都市]選択ボックスのどの値とも一致しない場合、リセットする必要があるということです。つまり、[都市を選択]オプションを選択する必要があり、フィルターを適用せずにすべての結果が表示されます。

私のコードでは、都市のいずれかを選択してから「都市を選択」を選択しようとすると、フィルターがリセットされません。

これを修正するにはどうすればよいですか?

完全なコードは次のとおりです。

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {
 $scope.loc = {
  Sydney: 4,
  Toronto: 7,
  London: 3,
  Berlin: 7
 };
 $scope.country = ['Australia', 'India', 'Germany', 'China', 'Canada', 'United Kingdom'];
 $scope.fullData = [{
  name: 'ABC',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'CDE',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'DEF',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'CDE',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'ABC',
  countryName: 'United Kingdom',
  city: 'London'
 }, {
  name: 'ABC',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'DEF',
  countryName: 'Canada',
  city: 'Toronto'
 }, {
  name: 'DEF',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'BCD',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  countryName: 'Canada',
  city: 'Toronto'
 }];
}]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="container">
  <div ng-app="myApp" ng-controller="myCtrl">
    <div class="row">
      <div class="col-md-3">
        <label>Search Keyword:</label>
        <input type="text" class="form-control" ng-model="my.$"/>
      </div>
      <div class="col-md-3">
        <label>Country:</label>
        <select class="form-control" ng-model="my.countryName" ng-options="countryName as countryName for countryName in country">
          <option value="" selected>Select a country</option>
        </select>
      </div>
      <div class="col-md-3">
        <label>City</label>
        <select class="form-control" ng-model="my.city" ng-init="my.city='${city}'" ng-options="key as key for (key, value) in loc">
          <option value="" selected>Select a city</option>
        </select>
      </div>
    </div>
    <hr />
    <div class="row">
      <table class="table table-bordered">
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>City</th>
        </tr>
        <tr ng-repeat="item in fullData | filter: my">
          <td>{{item.name}}</td>
          <td>{{item.countryName}}</td>
          <td>{{item.city}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Arefの時間

この場合、cityという名前のプロパティである空のオブジェクトに適用されたフィルターですが、フィルターが適用されたオブジェクトのすべてのプロパティは、最初に空の値を持つ必要があります。

コントローラでオブジェクトを初期化する必要があります

 $scope.my={$:'',countryName:'',city:''};

ng-initcityプロパティを削除します

フォローしてみてください

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {
$scope.my={$:'',countryName:'',city:''};
 $scope.loc = {
  Sydney: 4,
  Toronto: 7,
  London: 3,
  Berlin: 7
 };
 $scope.country = ['Australia', 'India', 'Germany', 'China', 'Canada', 'United Kingdom'];
 $scope.fullData = [{
  name: 'ABC',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'CDE',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'DEF',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'CDE',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'ABC',
  countryName: 'United Kingdom',
  city: 'London'
 }, {
  name: 'ABC',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'DEF',
  countryName: 'Canada',
  city: 'Toronto'
 }, {
  name: 'DEF',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'BCD',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  countryName: 'Canada',
  city: 'Toronto'
 }];
}]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="container">
  <div ng-app="myApp" ng-controller="myCtrl">
    <div class="row">
      <div class="col-md-3">
        <label>Search Keyword:</label>
        <input type="text" class="form-control" ng-model="my.$"/>
      </div>
      <div class="col-md-3">
        <label>Country:</label>
        <select class="form-control" ng-model="my.countryName" ng-options="countryName as countryName for countryName in country">
          <option value="" selected>Select a country</option>
        </select>
      </div>
      <div class="col-md-3">
        <label>City</label>
        <select class="form-control" ng-model="my.city"  ng-options="key as key for (key, value) in loc">
          <option value="" selected>Select a city</option>
        </select>
      </div>
    </div>
    <hr />
    <div class="row">
      <table class="table table-bordered">
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>City</th>
        </tr>
        <tr ng-repeat="item in fullData | filter: my">
          <td>{{item.name}}</td>
          <td>{{item.countryName}}</td>
          <td>{{item.city}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

リストビューフィールドがデータベースのフィールドと一致しない場合に「見つからない」というフィードバックを提供する方法

ブートストラップテーブルフィルター-結果がない場合に「一致するレコードが見つかりません」行を追加するにはどうすればよいですか?

2つの選択ボックスを作成して、それらが一致しない場合に互いに非表示にし、2番目のオプションを自動的に選択するにはどうすればよいですか?

コードがvb.netで見つからない場合、グリッドビューフィルター状態ではなくMessageBoxを使用してテキストボックスにイベントが必要です

ライブ検索ボックスの入力がデータベースと一致しない場合、データが見つからないことを表示するにはどうすればよいですか?

キーが一致しない場合、部屋はデータベースをリセットします

Excel Activexリストボックスを長方形をクリックすると開き、リストボックスにフォーカスがない場合は閉じ、選択範囲をセルに出力します

インデックスは他のテーブルの番号と一致し、見つからない場合は最初の3桁と一致します

Vaadin 13グリッドに「すべて選択」チェックボックスがありますか(フィルター条件でも機能し、一部のデータでもキャッシュにない場合でも機能しますか?)

Googleスプレッドシートでチェックボックスがオンになっている場合は、テキストが一致するセルを条件付きでフォーマットします

一致するものが見つからない場合はデフォルト値を返します

SQLクエリ; メインテーブルのすべてのレコードを返し、条件に応じて結合テーブルからフィールドを追加します。結合されたテーブルに一致するものが見つからない場合は、値を空のままにします

JQueryでチェックボックスを使用してフィルタリングする場合、完全に一致するだけでなく、データ属性の完全な文字列内を検索するにはどうすればよいですか?

配列をフィルタリングして一致するものを見つけ、一致するものがない場合はelseステートメントを実行します

Pythonを使用してディレクトリ内のパターンに一致するファイルを検索し、見つからない場合はメールで送信する

WinSCPを使用してFTPサーバーにアップロードするファイルを選択するマスクがファイルと一致しない場合、SSISタスクに失敗します

1つのフィールド値がリストの値と一致する場合は、CSVデータから行を削除します

チェックボックスが選択されている場合は常に、アクセスフォームのテキストボックスにテーブルフィールドのPhoneContactsを自動入力します

データリスト:入力テキストボックスにクエリから一致した選択肢を表示します

一致するものが見つからない場合、ルックアップExcelは最小値を返します

リストをフィルタリングしても結果が返されない場合は、「一致しない」メッセージを表示します

Django:選択ボックスから値を選択した場合は、フォームフィールドに入力します

2つのフィールドが一致しない場合は、データベーステーブルに新しい行を挿入します。一致しない場合は、特定の列の値を合計します。

JavaScript フィルターの代替リターン - クライアントが見つからない場合にメッセージを表示

一致が見つからない場合、replaceは何をしますか?(フードの下)

グループラベルの値が一致する場合は、ドロップダウンリストアイテムを選択しますか?

一致するレコードが見つからないことを表示する方法angularjsUIグリッドでデフォルトのフィルターを使用する場合

タプルのリストで、特定のフィールドが設定されている場合に一致するものを見つけます

チェックボックスリストからチェックボックスがオフになっている場合は、入力フィールドをクリアします

TOP 一覧

  1. 1

    モーダルダイアログを自動的に閉じる-サーバーコードが完了したら、Googleスプレッドシートのダイアログを閉じます

  2. 2

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  3. 3

    CSSのみを使用して三角形のアニメーションを作成する方法

  4. 4

    ドロップダウンリストで選択したアイテムのQComboBoxスタイル

  5. 5

    ZScalerと証明書の問題により、Dockerを使用できません

  6. 6

    PyCharmリモートインタープリターはプロジェクトタブにサイトパッケージのコンテンツを表示しません

  7. 7

    Windows 10でのUSB入力デバイスの挿入/取り外しの検出

  8. 8

    Excel - count multiple words per cell in a range of cells

  9. 9

    PictureBoxで画像のブレンドを無効にする

  10. 10

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  11. 11

    スタート画面にシャットダウンタイルを追加するにはどうすればよいですか?

  12. 12

    Python / SciPyのピーク検出アルゴリズム

  13. 13

    Luaの文字列から特定の特殊文字を削除するにはどうすればよいですか?

  14. 14

    Pythonを使用して、リストからデータを読み取り、特定の値をElasticsearchにインデックス付けするにはどうすればよいですか?

  15. 15

    LinuxでPySide2(Qt for Python)をインストールするQt Designerはどこにありますか?

  16. 16

    goormIDEは、ターミナルがロードするデフォルトプロジェクトを変更します

  17. 17

    QGISとPostGIS(マップポイント(米国の地図上にraduisを使用した緯度と経度)

  18. 18

    MLでのデータ前処理の背後にある直感

  19. 19

    ターミナルから「入力ソースの変更」ショートカットを設定する

  20. 20

    パンダは異なる名前の列に追加します

  21. 21

    同じクラスの異なるバージョンを使用したクラスローディング:java.lang.LinkageError:名前の重複クラス定義を試行しました

ホットタグ

アーカイブ