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 = "";

          }
          .
          .
          .