CODEWITHSUNDEEP
javascriptangularjs
yozawiratama
yozawiratama

Reputation: 4318

angular js, how to enabled when selected change

i have problem using angularjs, because i new.

this is my html code :

<select id="provinsiSelect" ui-select2 ng-model="params.id" style="width: 200px;">
    <option value=""></option>
    <option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
    ng-selected="v.id == params.id">{{v.text}}</option>
</select>

<select id="kabupatenSelect" disabled ui-select2 ng-model="params2.id" style="width: 200px;">
    <option value=""></option>
    <option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
    ng-selected="y.id == params.id">{{y.text}}</option>
</select>

as you can see that, there are two select, please help me when first select change, then second select enable from disable.

Upvotes: 0

Views: 2300

Answers (2)

ta4ka
ta4ka

Reputation: 92

With ng-disabled as the previous comment said. You should also add a watch on the first select variable, and just set the params.id to the value you need on change.

$scope.$watch('provinsiSelect', function (newVal) {
    $scope.params.id = true;
});

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 219938

Simply use ng-disabled:

<select id="provinsiSelect" ui-select2 ng-model="params.id" style="width: 200px;">
    <option value=""></option>
    <option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
    ng-selected="v.id == params.id">{{v.text}}</option>
</select>

<select id="kabupatenSelect" ng-disabled="params.id" ui-select2 ng-model="params2.id" style="width: 200px;">
    <option value=""></option>
    <option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
    ng-selected="y.id == params.id">{{y.text}}</option>
</select>

Assuming you don't have an id of 0, params.id should be truthy once an id has been selected.

Upvotes: 2

Related Questions