按复选框过滤问题

Question

我正在尝试按列标题过滤测试/问题结果。

这是一个由两部分组成的问题：

• 如何使用复选框过滤行数据
• 如何使用unique过滤器确保删除重复的复选框

第1部分：

例如，这里的4个问题都有相关的类别和困难。如果我点击Perio类别，则只会显示Perio类别下的问题行。同样，我想应用这些过滤器的正确性和难度。

我认为对模型使用| filter:category或| filter:difficulty会起作用，但它不会过滤。我怎么能做到这一点？

复选框：

        <div class="category-filter">
            <span class="heading">Filter</span>

            Categories
            <div ng-repeat="q in questions" class="question">
                <input type="checkbox" ng-model="category"> {{q.question.cat_id}}</span>
            </div>

            Correct/Incorrect
            <div><input type="checkbox" ng-model="correct"> Correct</div>
            <div><input type="checkbox" ng-model="incorrect"> Incorrect</div>

            Difficulty
            <div ng-repeat="q in questions" class="question">
                <input type="checkbox" ng-model="difficulty"> {{q.question.difficulty}}</span>
            </div>
        </div>

问题行循环：

        <div class="questions">
            <span class="heading">Question</span>
            <div ng-repeat="q in questions | filter:category" class="question" >
                <span ng-class="{correct: q.result == 'correct', incorrect: q.result == 'incorrect'}">{{q.question.id}}) {{q.question.question}}</span>
            </div>
        </div>
        <div class="question-category">
            <span class="heading">Category</span>
            <div ng-repeat="q in questions | filter:category " class="question">
                <span>{{q.question.cat_id}}</span>
            </div>
        </div>
        <div class="question-difficulty">
            <span class="heading">Difficulty</span>
            <div ng-repeat="q in questions | filter:difficulty" class="question">
                <span>{{q.question.difficulty}}</span>
            </div>
        </div>

示例数据结构：

                $scope.questions = [
                    {
                        question: {
                            id: 1,
                            question: 'Sit error corporis natus fugit eligendi quo assumenda. Ipsum officia quia suscipit nemo et.',
                            question_time: '1:10',
                            cat_id: 'Perio',
                            difficulty: 'easy'
                        },
                        result: 'correct',
                        user : 1
                    },
                    {
                        question: {
                            id: 2,
                            question: 'Jibber jabber jib jab sit error corporis natus fugit eligendi quo assumenda. Ipsum officia quia suscipit nemo et.',
                            question_time: '1:25',
                            cat_id: 'XRay',
                            difficulty: 'medium'
                        },
                        result: 'incorrect',
                        user : 1
                    },
                    {
                        question: {
                            id: 3,
                            question: 'Yabber jibber jabber jib jab sit error corporis natus fugit eligendi quo assumenda. Ipsum officia quia suscipit nemo et.',
                            question_time: '2:30',
                            cat_id: 'Perio',
                            difficulty: 'easy'
                        },
                        result: 'incorrect',
                        user : 1
                    },
                    {
                        question: {
                            id: 4,
                            question: 'Cool dude jabber jib jab sit error corporis natus fugit eligendi quo assumenda. Ipsum officia quia suscipit nemo et.',
                            question_time: '3:10',
                            cat_id: 'Teeth Stuff',
                            difficulty: 'hard'
                        },
                        result: 'correct',
                        user : 1
                    }
                ];

第2部分：独特过滤器

我尝试使用Angular Unique Filter作为推荐here，但它没有过滤掉唯一的类别。相反，它仅显示Perio类别。它应该做的只是过滤掉冗余的Perio类别，并仅显示唯一的类别。

            <div ng-repeat="q in questions | unique:'q.question.cat_id'" class="question">
                <input type="checkbox" ng-model="category"> {{q.question.cat_id}}</span>
            </div>

到目前为止，我只看到unique与ngOptions和<select>一起使用，但我不想使用select，而是使用复选框。< / p>