HTML和Angular:选择取决于其他选择

时间:2017-12-16 13:54:46

标签: javascript html angular

我有一个关于角度的小问题。我有这两个选择字段,我想过滤结果 具有第一选择字段的所选选项的第二选择字段的。 A1和A2只是文字。一个secObj是 还有文字。因此,如果首先选择A1,则在select-field 2中,所有具有modelname A2的模型都应该在结果中。

我尝试了许多互联网来源,但没有任何效果。

谢谢你!

<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>

1 个答案:

答案 0 :(得分:1)

&#13;
&#13;
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]
			
      };
    }]);
&#13;
<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>
&#13;
&#13;
&#13;