Cacading Drop Down 2nd Dropdown名称没有得到更改angularjs？

Question

我有移动品牌列表。根据第一下拉列表，这里有第二下拉列表，但是。当我在第一下拉列表中选择nokia时，Lumia 735，Asha 230，Lumia 510这些都进入了第二下拉列表，在第二下拉列表中我选择了Lumia 735它的工作很好，但是我还是在第一个下拉菜单中选择了三星，第二个下拉列表变了，但是已经选择了Lumia 735。 期望：基于第一个下拉菜单选择第二个下拉菜单应该在第二个下拉菜单之后。在我提交第二个下拉菜单之后，我需要获取ID，品牌名称，型号

 angular.module('myApp', ['ui.filters']) .controller("myCntrl", function ($scope) { $scope.items= [{ id: "986745", brandname: "Nokia", modelname: "Lumia 735", price: "7500" }, { id: "896785", brandname: "Nokia", modelname: "Asha 230", price: "12000" }, { id: "546785", brandname: "Nokia", modelname: "Lumia 510", price: "9500" }, { id: "144745", brandname: "Samsung", modelname: "Samsung 110", price: "13000" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5", price: "5500" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note 4 Duos", price: "5500" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5", price: "5500" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note 4 Duos", price: "1000" }, { id: "232980", brandname: "Htc", modelname: "One X9", price: "1000" }, { id: "456798", brandname: "Htc", modelname: "Desire 820", price: "1000" } ] $scope.test = function() { console.log($scope.id); console.log($scope.selectedBrand); console.log($scope.selectedModel); } }) $(function () { setTimeout(function () { $("select").select2(); }, 100); }); //]]> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" /> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script> <div ng-app="myApp"> <div ng-controller="myCntrl"> <form name="addvehicleForm" data-ng-submit="test()" novalidate> <label>List Of Brand</label> <label for="singleSelect"> select: </label> <select ng-model="selectedBrand"> <option ng-repeat="item in items | unique: 'brandname'" value="{{item.brandname}}">{{item.brandname}}</option> </select> <select ng-model="selectedModel"> <option ng-repeat="item in items | filter: {brandname: selectedBrand}" value="{{item.modelname}}">{{item.modelname}}</option> </select> <div class="padding"> <button class="button button-full button-stable" type="submit" > Save </button> </div> </form> </div> </div> 

请运行上面的代码并解决问题

Answer 1

似乎您想要的只是如果更改品牌就清除模型，要执行此操作，只需将ng-click

<select ng-model="selectedBrand">
<option ng-repeat="item in items | unique: 'brandname'" value="{{item.brandname}}" 
               ng-click="setNull()">{{item.brandname}}</option>
</select>

在脚本中执行类似

angular.module('myApp', ['ui.filters'])
    .controller("myCntrl", function ($scope) {

          $scope.setNull = function(){

               $scope.selectedModel = "";

          }
          .
          .
          .