I have a drop-down list of locations that appears in a pop-up, allowing users to select one, multiple, or all locations. The default label of the drop-down is "Choose Locations".
How can I address the following scenarios:
If a user selects "select all" from the list, display "All" in the drop-down selection.
If a user selects more than one location, display "Multiple".
If a user selects only one location, display "location name".
Here is the code I am using to create the drop-down and pop-up for the list. Currently, it only displays "Choose Location(s)" regardless of the selection made by the user.
<div class="dropdown cp-dropdown">
<div class="btn btn-default" data-toggle="dropdown">
<!-- {{homeCtrl.newActivitySelectedLocation === '' ? 'Select Location' : homeCtrl.newActivitySelectedLocation.Name}}-->
Choose 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>