层叠下拉第二个下拉名称在angularjs中没有变化？

Question

我有移动品牌列表。这里基于第一个下拉列表第二个下拉列表即将到来但是。当我在第一个下拉列表中选择诺基亚时，Lumia 735、Asha 230、Lumia 510 这些将出现在第二个下拉列表中，在第二个下拉列表中我有选择 Lumia 735 它工作正常，但我再次在第一个下拉列表中选择了三星，第二个下拉列表已更改，但已选择 Lumia 735 仍然显示。 期望：基于第一个下拉选择第二个下拉应该来 2.在第 1 次和第 2 次下拉选择后，当我提交时，我需要获取 id、brandname、modelname

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

          }
          .
          .
          .