CODEWITHSUNDEEP
javascripthtmlangular
KSV97
KSV97

Reputation: 27

HTML and Angular: Select depends on other select

i have a litte question about angular. i have these two select-fields and i would like to filter the result of the second select-field with the selected option of the first select-field. A1 and A2 are only text. A secObj is also text. So if A1 is selected first, in select-field 2 all models with modelname A2 should be in the result.

i tried many sources of the internet but nothing worked.

thank you!

<div class="test">
       <select class="form-control" name="testA" id="123">
            <option>A1</option>
            <option>A2</option>
        </select> </div>

<div class="test2">

    <select class="form-control" name="testB" id="456">

        <option *ngFor="let model of models| filter: {modelname: ?? A1. or A2 ??} ;trackBy: trackId "> {{model.id}}

    </option>

</select></div>

Upvotes: 0

Views: 101

Answers (1)

user8893882
user8893882

Reputation: 

angular.module('myApp', [])
    .controller('myCtrl', ['$scope', function($scope) {
      $scope.item = ['A1','A2','A3']
      	$scope.selected_item = 'A1'
      $scope.sub_item = {'A1':[1,2,3,4,5],'A2':[4,5,6],'A3':[5,7,8]}
		$scope.slected_sub_item	= $scope.sub_item[$scope.selected_item]
		$scope.selected_sub_item_selected = $scope.slected_sub_item[0]
      $scope.update= function(key) {
        	$scope.selected_item =  key;
			$scope.slected_sub_item = $scope.sub_item[$scope.selected_item]
			$scope.selected_sub_item_selected = $scope.slected_sub_item[0]
			
      };
    }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-options="val for val in item" ng-change="update(selected_item)" ng-model="selected_item"></select>
<select ng-options="val for val in slected_sub_item" ng-model="selected_sub_item_selected"></select>
</body>

Upvotes: 1

Related Questions