根据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(); 
}; 

}