3個或更多布爾變成真時執行函數angularJs

Question

考慮下面的代碼：我的任務是檢查是否有4個或更多這些按鈕被選中，如果是，我需要顯示一個類似「你只能選擇3個過濾器「。請注意，我需要在啓動研究的按鈕之前執行此功能，所以我需要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

這應該工作：

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

Answer 2

下面的工作，雖然我不知道你的表現，但是。先測試一下。

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 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。