Zeigen Sie "Alle", "Multiple" oder "Eins" basierend auf der Anzahl der Dropdown-Auswahl in Angularjs

Question

Ich habe eine Checkbox-Liste von Standorten, die in einem Popup auftaucht, um einen, mehrere oder alle Orte auszuwählen. Die Standardbezeichnung für den Drop-down-Befehl ist "Wählen Sie die Standorte" aus.

Wie gehe ich mit folgenden Szenarien:

1. Display "Alle" in der Drop-Down-Auswahl, wenn der Benutzer wählt "alle wählen Sie" aus der Liste.

2. Display "Multiple", wenn Benutzer wählt mehr als eine Lage.

3. Display "Ortsnamen", wenn Benutzer wählt nur eine Lage.

Hier ist der Code, den ich Drop-Down-und Pop-up für list.But erstellen bin derzeit zeigt es nur „Select Location (s)“ egal, was aus Dropdown wählt Benutzer.

<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

Speichern Sie Ihre Klicks in einer temporären Liste und aktualisieren Sie die Bezeichnung abhängig vom Status zwischen der Hauptliste und der Temp.

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

}