angularjs中的多选下拉列表仅适用于Controller的初始化

时间:2018-06-29 22:15:16

标签: angularjs bootstrap-multiselect jquery-ui-multiselect angularjs-3rd-party

我正在使用jquery,引导多选下拉列表。我想在其他正常(单选)下拉列表(城市)的selectionChange事件上填充多选下拉列表(talukas)。我无法弄清楚为什么多选择下拉列表会在控制器的初始负载时填充,为什么不能在其他下拉列表的选择更改时填充。你能帮我么。谢谢。

场景-1 =>可以正常工作

 <div ng-controller="tempController" ng-init="initializeController()" ng-cloak>
         <select id="multiSelect" name="multiSelect" multiselect=""
           multiple="" ng-model="selectedTalukas" ng-options="option.talukaId as 
           option.label for option in talukas"></select>
</div>



 // .js


$scope.selectedTalukas = [];
     $scope.initializeController = function () {            
                            $scope.talukas = [
                              { talukaId: 1, label: 'Taluka1' },
                              { talukaId: 2, label: 'Taluka2' },
                              { talukaId: 3, label: 'Taluka3' }
                            ]
        }

场景-2 =>不能正常工作-为什么

 <select id="city" class="form-control select2" name="ddlCity" ng-model="c" ng-options="c as c.name for c in city | orderBy:'name'"
ng-change="selectedCityChange(c)" >  
</select>

 <select id="multiSelect" name="multiSelect" multiselect=""
   multiple="" ng-model="selectedTalukas" ng-options="option.talukaId as 
   option.label for option in talukas"></select>



 $scope.selectedCityChange = function (selectedValue) {
                if (selectedValue !== undefined) {
                    $scope.selectedCity = selectedValue;
                    $scope.selectedCityId = selectedValue.cityId;
                    $scope.ajaxPost(selectedValue.cityId,
                        '/api/Taluka/getTalukasForSelectedCity',
                        $scope.selectedCityChangeComplete,
                        $scope.selectedCityChangeError);
                }
            };

            $scope.selectedCityChangeComplete = function (response) {               
                $scope.talukas = response.data.talukaMasters;          

            }

0 个答案:

没有答案