У меня есть список местоположений, который появляется во всплывающем окне, позволяя им выбирать одно, несколько или все местоположение. Метка по умолчанию для dropwdown - " Выбрать местоположения ".
Как обрабатывать следующие сценарии:
Отобразите " Все " в раскрывающемся списке, если пользователь выбирает " выбрать все " из списка.
Дисплей " Несколько ", если пользователь выбирает несколько местоположений.
Отобразите " имя места ", если пользователь выбирает только одно местоположение.
Вот код, который я использую для создания раскрывающегося списка и всплывающих окон для списка. Но в настоящее время он отображает только "Выбрать местоположение (места)" независимо от того, какой пользователь выбирает из раскрывающегося списка.
<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>
Храните свои клики в списке темпов и обновляйте ярлык в зависимости от состояния между основным списком и температурой.
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();
};
}