Javascript 当3个或更多布尔值变为真时执行函数angularJs

考虑下面的代码：我的任务是检查是否选择了4个或更多的按钮，如果选择了，我需要显示一条自定义消息，比如“您只能选择3个过滤器”。请注意，我需要在启动研究的按钮之前执行此功能，因此我需要在用户激活和禁用按钮时不断检查这些布尔值。我试着使用$watch和ng change，但它们没有按预期工作

我该怎么做？希望我说得清楚，提前谢谢，如果需要澄清，请随时询问

此处的HTML和控制器逻辑：

    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn"
                style="text-align: left; width: 100%;"
                ng-click="smsFilter =! smsFilter"
                ng-class="{'active': smsFilter == true}">Sms</button>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn "
                style="text-align: left; width: 100%;"
                ng-click="videoChatFilter =! videoChatFilter"
                ng-class="{'active': videoChatFilter == true}">Video Chat</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn "
                style="text-align: left; width: 100%;"
                ng-click="chatFilter =! chatFilter"
                ng-class="{'active': chatFilter == true}">Chat</button>
        </div>

        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">

            <button class="btn btn-default filterBtn"
                style="text-align: left; width: 100%;"
                ng-click="socialFilter =! socialFilter"
                ng-class="{'active': socialFilter == true}">Social</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn "
                style="text-align: left; width: 100%;"
                ng-click="emailFilter =! emailFilter"
                ng-class="{'active': emailFilter == true}">Email</button>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn "
                style="text-align: left; width: 100%;"
                ng-click="telefonateFilter =! telefonateFilter"
                ng-class="{'active': telefonateFilter == true}">Telefonate</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn"
                style="text-align: left; width: 100%;"
                ng-click="formTicketFilter =! formTicketFilter"
                ng-class="{'active': formTicketFilter == true}">Form Ticket</button>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn "
                style="text-align: left; width: 100%;"
                ng-click="chatOfferFilter =! chatOfferFilter"
                ng-class="{'active': chatOfferFilter == true}">Chat Offer</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn "
                style="text-align: left; width: 100%;"
                ng-click="bannerFilter =! bannerFilter"
                ng-class="{'active': bannerFilter == true}">Banner</button>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn"
                style="text-align: left; width: 100%;"
                ng-click="webFilter =! webFilter"
                ng-class="{'active': webFilter == true}">Web</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn "
                style="text-align: left; width: 100%;"
                ng-click="agenziaFilter =! agenziaFilter"
                ng-class="{'active': agenziaFilter == true}">Agenzia</button>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
            <button class="btn btn-default filterBtn "
                style="text-align: left; width: 100%;"
                ng-click="crcFilter =! crcFilter"
                ng-class="{'active': crcFilter == true}">CRC</button>
        </div>
    </div>
<div class="row" style="text-align: center;">
    <button class="btn btn-default headerBtn" style="margin-top: 10px;" ng-click="applyFilters()">Apply Filters</button>
</div>

---

尽管我不知道性能如何，但下面的方法可以奏效。先测试一下

var filtersArray = [/*PUT YOUR FILTERS IN HERE AS WELL*/];
$scope.$watch(function(){
    var trueFilters = filtersArray.filter(function(f){ return f === true;});
    return trueFilters.length > 3;
}, function(_old, _new){
    if(!_new) return;
    //Do something when they are true
});

这应该起作用：

<p ng-show="videoChatFilter+chatFilter+socialFilter+emailFilter+telefonateFilter+formTicketFilter+chatOfferFilter+webFilter+agenziaFilter+crcFilter > 3">You can only select up to 3 filters</p>

您最多只能选择3个过滤器

---

请使用与每个筛选器相关的属性创建公共对象，并对消息块使用

ng if=“isFilterSelected（'smsFilter'，'videoChatFilter'）”

在您的控制器中，它将类似于

$scope.isFilterSelected=函数（）{
var filtersToCheck=angular.copy（参数）；
返回链（$scope.filters）
.filter（函数（值、名称）{
返回u0.contains（filtersToCheck，name）；
})
.every（u.identity）
.value（）；
}

我希望您在您的。。。应用程序

<p ng-show="videoChatFilter+chatFilter+socialFilter+emailFilter+telefonateFilter+formTicketFilter+chatOfferFilter+webFilter+agenziaFilter+crcFilter > 3">You can only select up to 3 filters</p>