content select option based on previous select option angularjs

Question

i want to create 2 select option which the content of the other one selected option based to previous option. here is my html

<div class="col-sm-2">
            <select class="form-control" ng-model="y">
                <option value="1">a</option>
                <option value="2">b</option>
            </select>
        </div>
        <div class="col-sm-2">
            <select class="form-control" ng-model="z">
                <option ng-repeat = "x in list" value="{{x.idproduct}}">{{x.descproduct}}</option>
            </select>
        </div>

but there is error, the other select option wont showing the option like in this picture

here is my js file

if ($scope.y === 1) {
         $scope.list = [
          {idproduct:"13", descproduct:"cc"},
          {idproduct:"14", descproduct:"dd"}
         ]; 
       }
       if ($scope.y === 2) {
         $scope.list = [
          {idproduct:"15", descproduct:"ee"}
         ]; 
       }

score 1 · Answer 1 · answered Nov 16 '17 at 08:00

1

The value of your option is String value="2"

And you're comparing it to an Integer if ($scope.y === 2)

You should compare it like if ($scope.y === '2') or if (parseInt($scope.y) === 2)

answered Nov 16 '17 at 08:00

bobharley

662
3
17

Sunil Lama · Accepted Answer · 2017-11-16T08:16:58.863

You need to bind the change event so that your list gets updated at the time that your value is updated. Plus your === can cause an issue. With === your string value is being compared to integers 1 and 2.
Here is a plunker: ng-change for change in dropdown

<select class="form-control" ng-model="y" ng-change="updateList()">
     <option value="1">a</option>
     <option value="2">b</option>
</select>
$scope.updateList()={
if ($scope.y == 1) {
         $scope.list = [
          {idproduct:"13", descproduct:"cc"},
          {idproduct:"14", descproduct:"dd"}
         ]; 
       }
       if ($scope.y == 2) {
         $scope.list = [
          {idproduct:"15", descproduct:"ee"}
         ]; 
       }
}

score 1 · Answer 3 · answered Nov 16 '17 at 08:03

Create a function and put your Js code in that function and call function on ng-change of the first dropdown. Here you if condition executes once during app initialization. So by triggering ng-change we can call function and update the lists based on the selection.

content select option based on previous select option angularjs

3 Answers3