Question

考虑以下代码：我的任务是检查是否选择了4个或更多这些按钮，如果是，我需要显示类似＆＃34之类的自定义消息;您只能选择3个过滤器＆＃34 ;。请注意，我需要在启动研究的按钮之前执行此功能，因此我需要Angular在用户激活和停用按钮时不断检查这些布尔值。我尝试使用$ 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>

角度控制器：

    //FILTERS
    $scope.smsFilter = false;
    $scope.videoChatFilter = false;
    $scope.chatFilter = false;
    $scope.socialFilter = false;
    $scope.emailFilter = false;
    $scope.telefonateFilter = false;
    $scope.formTicketFilter = false;
    $scope.chatOfferFilter = false;
    $scope.webFilter = false;
    $scope.agenziaFilter = false;
    $scope.crcFilter = false;

//function that executes the research
$scope.applyFilters = function(){...}

Answer 1

但是，以下方法可行，但我不了解性能。先测试一下。

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
});

Answer 2

这应该有效：

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

Answer 3

请使用与每个过滤器相关的属性创建公共对象，并使用ng-if="isFilterSelected('smsFilter', 'videoChatFilter')"作为消息块。

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

$scope.isFilterSelected = function () { var filtersToCheck = angular.copy(arguments); return _.chain($scope.filters) .filter(function(value, name){ return _.contains(filtersToCheck, name); }) .every(_.identity) .value(); }

我希望您在...应用程序中使用下划线或 lodash 。

当3个或更多布尔变为真正的角度时执行函数

3 个答案: