web-dev-qa-db-ja.com

AngularJSチェックボックスフィルター

結果をフィルタリングしたいと思います。

ワインのリストがあります。チェックボックスがチェックされていない場合、ワインのリスト全体が表示されます。

  • チェックボックスが1つだけチェックされている場合、関連カテゴリが表示されます
  • 複数のチェックボックスをオンにすると、関連するカテゴリが表示されます

私はAngularJSの初心者です。ng-modelで成功しましたが、ここにng-modelのないコードを関数に関連付けました：

<html ng-app="exampleApp">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>

    <script>
        angular.module("exampleApp", [])
                .controller("defaultCtrl", function ($scope) {
                    $scope.wines = [
                        { name: "Wine A", category: "red" },
                        { name: "Wine B", category: "red" },
                        { name: "wine C", category: "white" },
                        { name: "Wine D", category: "red" },
                        { name: "Wine E", category: "red" },
                        { name: "wine F", category: "white" },
                        { name: "wine G", category: "champagne"},
                        { name: "wine H", category: "champagne" }

                    ];


                    $scope.selectItems = function (item) {
                        return item.category == "red";
                    };

                    $scope.selectItems = function (item) {
                        return item.category == "white";
                    };

                    $scope.selectItems = function (item) {
                        return item.category == "champagne";
                    };
                });
    </script>
</head>
<body ng-controller="defaultCtrl">

<h4>red: <input type="checkbox"></h4>
<h4>white: <input type="checkbox"></h4>
<h4>champagne: <input type="checkbox"></h4>



            <div ng-repeat="w in wines | filter:selectItems">
                {{w.name}}
                {{w.category}}
            </div>


</body>
</html>

Ng-modelまたはng-changeを使用して各チェックボックスボタンに機能を関連付け、リアルタイムフィルタリングモデルを作成するにはどうすればよいですか？

angularjscheckboxangularjs-directiveangular-ngmodelangular-filters
18
Stéphane

filterを$filterとして使用することを好みます

app.filter('someFilter',checkboxFilter)
checkboxFilter() {
    return function (arr,filter,key,noOne=false) {
        // arr is an array of objects
        // filter is checkbox filter. someting like {1:true,2:false}
        // key is a property in ech object inside arr
        // noOne is a behavior if none of checkbox is activated (default:false)
        if (!arr.length) return null;

        function noOneCheck(filter) {
            return Object.keys(filter).every((key) => {
                return !filter[key]
            })
        }
        return arr.filter((i) => {
            return filter[i[key]] || (noOne && noOneCheck(filter))
        })
    }
};

html：

ng-repeat="u in project.projectTeamInvite | checkbox:project.status:'status' track by $index">
1
dimson d

いくつかの実装が可能です。以下がその1つです。

  1. _$scope.filter = {}_オブジェクトを使用して、各フィルターの状態を保持します。例えば。 _{red: true, white: false...}_。

  2. _ng-model_を使用して、各チェックボックスを対応するプロパティに関連付けます。例：_input type="checkbox" ng-model="filter['red']" />_。

  3. ワインを表示するかどうかを決定する関数（$scope.filterByCategory(wine)など）を使用します（_$scope.filter_オブジェクトに基づいて）。

  4. その関数を使用して、カテゴリに基づいてアイテムをフィルタリングします。例えば。 _<div ng-repeat="wine in wines | filter:filterByCategory">_

filterByCategory関数は次のように実装できます。

_function filterByCategory(wine) {
  // Display the wine if
  var displayWine =
      // the wine's category checkbox is checked (`filter[category]` is true)
      $scope.filter[wine.category] ||   // or 

      // no checkbox is checked (all `filter[...]` are false)
      noFilter($scope.filter);

  return displayWine;
};
_

ここで、noFilter()は、アクティブ化されたフィルターがあるかどうかをチェックする関数です（フィルターがない場合はtrueを返します）。

_function noFilter(filterObj) {
  return Object.
    keys(filterObj).
    every(function (key) { return !filterObj[key]; });
}
_

こちらもご覧くださいショートデモ。

[〜＃〜] update [〜＃〜]：

複数のフィルターをサポートする修正バージョンを作成しました（カテゴリーによるフィルタリングだけでなく）。
基本的に、（最初のwine要素に基づいて）使用可能なプロパティを動的に検出し、各プロパティに基づいてフィルターを適用するためのコントロール（チェックボックスのグループ）を追加し、 ：

  1. すべてのプロパティに基づいて、各wineアイテムをフィルターします。
  2. プロパティにフィルターが適用されていない場合（つまり、チェックボックスがオンになっていない場合）、無視されます。
  3. プロパティのチェックボックスがオンになっている場合、wineアイテムのフィルタリングに使用されます（上記を参照）。
  4. ANDを使用して複数のフィルターを適用するコードがあります（つまり、すべてのプロパティが一致する必要があります）またはOR（少なくとも1つのプロパティが一致する必要があります）。

こちらもご覧ください更新されたデモ （。

46
gkalpak