根据 Angularjs 中下拉选择的数量显示 "All"、"Multiple" 或 "one"

Question

我有一个位置复选框列表，它会出现在弹出窗口中，允许他们 select 一个、多个或所有位置。下拉列表的默认标签是“Select Locations”。

我如何处理以下情况：

在下拉列表中显示“全部”selection if user selects “select 全部" 来自列表。
显示“多个”如果用户select有多个位置。
显示“位置名称”如果用户selects 只有一个位置。

这是我用来为列表创建下拉菜单和弹出窗口的代码，但目前它只显示“Select Location(s)”，无论 selects 来自哪个用户下拉菜单。

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

}

根据 Angularjs 中下拉选择的数量显示 "All"、"Multiple" 或 "one"

Show "All", "Multiple" or "one" based on number of dropdown selections in Angularjs

javascript

dom-events

angularjs