根據Angularjs中下拉選擇的數量顯示「全部」，「多個」或「一個」

Question

我有一個複選框列表，顯示彈出窗口中允許他們選擇一個，多個或所有位置的位置。 dropwdown的默認標籤是「選擇地點」。

如何處理以下情況：

1. 顯示「所有」，在下拉菜單中選擇，如果用戶從列表中選擇「選擇所有」。

2. 顯示 「多」 如果用戶選擇多於一個位置。

3. 顯示 「地點名稱」 如果用戶選擇只有一個位置。

這裏是我使用創建下拉列表，並彈出了list.But代碼目前只顯示「選擇地點（S）」無論從下拉列表中選擇哪些用戶。

<div class="dropdown cp-dropdown"> 
           <div class="btn btn-default" data-toggle="dropdown"> 
            <!-- {{homeCtrl.newActivitySelectedLocation === '' ? 'Select Location' : homeCtrl.newActivitySelectedLocation.Name}}--> 
            Select Location(s) 


            <span class="pull-right caret"></span> 
           </div> 
           <div id="location-list" class="dropdown-menu cp-checkbox-dropdown menu-container" role="menu" ng-click="$event.stopPropagation();"> 
            <div> 
             <input type="text" ng-model="homeCtrl.newActivitySearchLocation" /> 
            </div> 
            <div id="location-list-container"> 
             <div class="row" ng-if="homeCtrl.newActivityLocationList.length > 0"> 
              <label class="cp-checkbox"> 
               <input value="ALL" type="checkbox" id="select_all_locpop" ng-model="homeCtrl.newActivityLocationSelectAll" ng-click="homeCtrl.newActivityLocationFilter('All', homeCtrl.newActivityLocationSelectAll)" /> 
               <span></span>Select All 
              </label> 
             </div> 
             <div id="location-list-pop"> 
              <div class="row" data-ng-repeat="location in homeCtrl.newActivityLocationList | filter: {'Name':homeCtrl.newActivitySearchLocation}"> 
               <label class="cp-checkbox"> 
                <input value="{{location.Id}}" type="checkbox" ng-click="homeCtrl.updateActivityGrid('location-list-pop','select_all_locpop')" /><span></span> 
                {{location.Name}} 
               </label> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

Answer 1

將您的點擊存儲在臨時列表中，並根據主列表和臨時狀態之間的狀態更新標籤。

var updateLocationDisplay = function(){ 

    if(tempList.length === mainList.length){ 
    $scope.locationLabel = "All"; 
    }else if(tempList.length > 1){ 
    $scope.locationLabel = "Multiple"; 
    }else if(tempList.length === 1){ 
    $scope.locationLabel = tempList[0]; 
    }else{ 
    $scope.locationLabel = "Select a location"; 
    } 
}; 

$scope.locationClick = function(name){ 
    var index = tempList.indexOf(name); 
    if(index > 0){ 
    // remove it 
    tempList.splice(index, 1); 
    } 
    else{ 
    // add it 
    tempList.push(name); 
    } 

    updateLocationDisplay(); 
}; 

}