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
Post a Comment