javascript - Semantic UI dropdown with angular not clear selected value -


i've created small sample of happening.

http://plnkr.co/edit/py9t0g2aghtxfnjvlclf

basically, html is:

<div data-ng-app="app" data-ng-controller="main">     <select class="ui dropdown" id="ddlstate" data-ng-options="s.name s in states track s.id" data-ng-model="selectedstate"></select>         <select class="ui dropdown" id="ddlcity" data-ng-options="c.name c in cities track c.id" data-ng-model="selectedcity"></select> </div> 

and javascript is:

 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 when change first dropdown value 'b' or 'c', value of second dropdown does not change, changed in angular model.

you guys can notice i've line $(".ui.dropdown").dropdown().dropdown("refresh") refresh values not work.

i tried destroy , recreate using $(".ui.dropdown").dropdown("destroy").dropdown() still not work.

any help?

simply using ngmodel won't make values change dynamically. take @ documentation here: https://docs.angularjs.org/api/ng/directive/ngmodel

you can bind values using ngbind or have done onchange check value , change second drop down accordingly. like:

$("#ddlstate").on("change", function(e) {     //check $scope.selectedstate it's value, , change #ddlcity/$scope.selectedcity accordingly  }); 

Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -