带有复选框

Question

我有一个带有搜索框的AngularJS搜索过滤器。 我想通过函数或纯AngularJS添加复选框过滤。 复选框应该过滤名为cat的数组（类别的缩写）。

我的数据位于名为cat（类别的缩写）的数组中。 产品可以有多个类别，例如：

product_A.cat: [ 'Continuing Education', 'Scientific Session']

我的初级开发人员尝试为每个复选框创建过滤功能。 但是我希望从那里开始。

<h4 class="blue-title">Filter by category:</h4>
                    <div class="navbar">

                        <div class="navbar-header">
                            <button class="navbar-toggle btn btn-block" id="filtercategories"
                                type="button" data-toggle="collapse"
                                data-target=".searchbar-collapse">
                                <span class="fa fa-filter"></span>&nbsp;&nbsp;Categories
                            </button>
                        </div>

                        <div class="collapse navbar-collapse searchbar-collapse">
                            <button type="button" class="btn btn-default btn-block"
                                style="margin: 7px 0;" ng-click="resetFilters()">RESET
                                FILTERS</button>
                        </div>

                        <div class="collapse navbar-collapse searchbar-collapse">
                            <h5 style="font-weight: bold;">FREE</h5>
                            <div ng-repeat="FREEcategory in FREE">
                                <input type="checkbox" ng-model="FREEcategory.on"
                                    ng-change="FREEcheckChange()"> {{FREEcategory.name}}
                            </div>
                        </div>

                        <div class="collapse navbar-collapse searchbar-collapse">
                            <h5 style="font-weight: bold;">CONTINUING EDUCATION</h5>
                            <div ng-repeat="CEcategory in CE">
                                <input type="checkbox" ng-model="CEcategory.on"> {{CEcategory.name}}
                            </div>
                        </div>

                        <div class="collapse navbar-collapse searchbar-collapse">
                            <h5 style="font-weight: bold;">BEST OF ATS CONFERENCE</h5>
                            <div ng-repeat="BATScategory in BATS">
                                <input type="checkbox" ng-model="BATScategory.on"
                                    ng-change="BATScheckChange()"> {{BATScategory.name}}
                            </div>
                        </div>

                        <div class="collapse navbar-collapse searchbar-collapse">
                            <h5 style="font-weight: bold;">APCCMPD</h5>
                            <div ng-repeat="APCCMPDcategory in APCCMPD">
                                <input type="checkbox" ng-model="APCCMPDcategory.on"
                                    ng-change="APCCMPDcheckChange()">
                                {{APCCMPDcategory.name}}
                            </div>
                        </div>


                        <div class="collapse navbar-collapse searchbar-collapse">
                            <h5 style="font-weight: bold;">YEAR</h5>
                            <div ng-repeat="YEARcategory in YEAR">
                                <input type="checkbox" ng-model="YEARcategory.on"
                                    ng-change="YEARcheckChange()"> {{YEARcategory.name}}
                            </div>
                        </div>