Я создал небольшой пример того, что происходит.
http://plnkr.co/edit/py9T0g2aGhTXFnjvlCLF
В основном, HTML:
<div data-ng-app="app" data-ng-controller="main">
<select class="ui dropdown" id="ddlState" data-ng-options="s.name for s in states track by s.id" data-ng-model="selectedState"></select>
<select class="ui dropdown" id="ddlCity" data-ng-options="c.name for c in cities track by c.id" data-ng-model="selectedCity"></select>
</div>
И javascript:
angular.module("app", [])
.controller("main", function($scope, $timeout) {
$scope.selectedState = {id:1,name:"A"};
$scope.selectedCity = {id:1,name:"A.1",stateId:1};
$scope.states = [{id:1,name:"A"},{id:2,name:"B"},{id:3,name:"C"}];
var fakeDataSource = [
{id:1,name:"A.1",stateId:1},
{id:2,name:"A.2",stateId:1},
{id:3,name:"A.3",stateId:1},
{id:4,name:"B.1",stateId:2},
{id:5,name:"B.2",stateId:2},
{id:6,name:"B.3",stateId:2},
{id:7,name:"C.1",stateId:3},
{id:8,name:"C.2",stateId:3},
{id:9,name:"C.3",stateId:3}
];
$scope.$watch("selectedState", function(n,o){
if (n !== o)
$scope.selectedCity = null;
$scope.cities = fakeDataSource.filter(function(x){
return n.id === x.stateId;
});
$timeout(function(){
$(".ui.dropdown").dropdown().dropdown("refresh");
});
})
$timeout(function(){
$(".ui.dropdown").dropdown();
})
})
Проблема заключается в том, что я меняю первое выпадающее меню на значение "B" или "C", значение второго раскрывающегося списка не меняется, даже если оно изменяется в угловой модели.
Вы можете заметить, что у меня есть строка $(".ui.dropdown").dropdown().dropdown("refresh")
чтобы обновить значения, но не работает.
Я попытался уничтожить и воссоздать с помощью $(".ui.dropdown").dropdown("destroy").dropdown()
но все равно не работает.
Любая помощь?
Простое использование ngModel
не будет изменять значения динамически. Взгляните на документацию здесь: https://docs.angularjs.org/api/ng/directive/ngModel
Вы можете привязать значения, используя ngBind
или то, что я сделал, это сделать onChange
чтобы затем проверить значение и соответственно изменить вторую снизу. Что-то вроде:
$("#ddlState").on("change", function(e) {
//check $scope.selectedState for it value, and change #ddlCity/$scope.selectedCity accordingly
});