如何在从数组中删除元素时更改选择标记值？

Question

我有select tag从array这样取值

<select class="groupForArchive" ng-model="selected.country">
      <option ng-selected= "{{country == selected.country}}" ng-repeat="country in countrynList" value={{country}}> {{ country.name }} </option>
    </select>

当我从array(countryList)删除元素时，我正在为此tag $scope.selected.country = newValue设置新值，但在select box我正在获得像这张图片中的自由空间

从列表中删除国家/地区之前

从列表中删除国家后

当我正在使用select代码时ng-model我正确object但我无法在select box中看到它并且我不知道哪个项目是newValue地选择。

P.S countrynList是数组的另一个项目（来自{{1}}的项目）

我该如何解决？

Answer 1

将AngularJS库更新为最新版本并进行更改，如下所示：

angular.module('app', []).controller('ctrl', function($scope){    
  $scope.countrynList = [  
    {name:'USA'}, {name:'Spain'}, {name:'France'}, {name:'Germany'}
  ]
  $scope.selected = {country: $scope.countrynList[0]};
  
  $scope.Delete = function(){    
    var index = $scope.countrynList.indexOf($scope.selected.country);
    $scope.countrynList.splice(index, 1);
    $scope.selected.country = $scope.countrynList[0];
  }  
})

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
  <select class="groupForArchive" ng-model="selected.country">
    <option ng-repeat="country in countrynList" ng-value='country'>
      {{country.name}}
    </option>
  </select>
  {{selected.country}}
  <br>
  <input type='button' ng-click='Delete()' value='Delete First'/>
</div>