19

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

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

  • 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 を使用して関数を各チェックボックス ボタンに関連付け、リアルタイム フィルタリング モデルを作成する方法は??

4

3 に答える 3