语义UI下拉的角度不明确选择值。

I've created a small sample of what is happening.

我已经创建了一个小样本。

http://plnkr.co/edit/py9T0g2aGhTXFnjvlCLF

Basically, the HTML is:

基本上,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>

And the javascript is:

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

The problem is when I change the first dropdown to value 'B' or 'C', the value of second dropdown does not change, even it is changed in angular model.

问题是，当我将第一个下拉值改为“B”或“C”时，第二个下拉值的值不会改变，即使它在角度模型中也会改变。

You guys can notice that I've the line $(".ui.dropdown").dropdown().dropdown("refresh") to refresh the values but does not work.

您可以注意到，我有一行$(“.ui.dropdown”).dropdown().dropdown(“刷新”)来刷新值，但不起作用。

I tried destroy and recreate using $(".ui.dropdown").dropdown("destroy").dropdown() but still does not work.

我尝试使用$(“.ui.dropdown”).dropdown(“destroy”).dropdown()来销毁和重新创建，但仍然不起作用。

Any help?

任何帮助吗?

1 个解决方案

#1

Simply using ngModel won't make the values change dynamically. Take a look at the documentation here: https://docs.angularjs.org/api/ng/directive/ngModel

简单地使用ngModel不会动态地改变值。看看这里的文档:https://docs.angularjs.org/api/ng/directive/ngModel。

You can bind the values using ngBind or what I have done is do an onChange to then check the value and change your second drop down accordingly. Something like:

您可以使用ngBind来绑定值，或者我所做的是做一个onChange，然后检查值并相应地更改您的第二次下降。喜欢的东西:

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

#1