角度不明確的選擇值的語義UI下拉

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()重新創建，但仍然無法正常工作。

任何幫助？

來源

2016-01-27 Alexandre Perez

僅使用ngModel將不會使值動態變化。看看這裏的文檔：https://docs.angularjs.org/api/ng/directive/ngModel

可以使用ngBind或什麼，我所做的是做一個onChange來再檢查值和更改下相應的第二次下降綁定的值。例如：

$("#ddlState").on("change", function(e) { 
    //check $scope.selectedState for it's value, and change #ddlCity/$scope.selectedCity accordingly 
});

來源

2016-01-27 20:39:24

角度不明確的選擇值的語義UI下拉

回答

相關問題