Question

我有一个弹出窗口中的位置复选框列表，允许他们选择一个，多个或所有位置。 dropwdown的默认标签为＆＃34; 选择地点＆＃34;。

如何处理以下情况：

显示＆＃34; 全部＆＃34;如果用户选择＆＃34; 全选＆＃34;则在下拉列表中选择从列表中。
显示＆＃34; 多个＆＃34;如果用户选择多个位置。
显示＆＃34; 位置名称＆＃34;如果用户选择仅一个位置。

以下是我用来为list创建下拉列表和弹出窗口的代码。但是目前它只显示＆＃34;选择位置＆＃34;无论用户从下拉列表中选择什么。

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

}

显示＆＃34;所有＆＃34;，＆＃34;多个＆＃34;或者＆＃34;一个＆＃34;根据Angularjs中的下拉选项数量

1 个答案: