angularJs：删除ng repeat值中的项目后，如何更新selectbox dom内容？

我在我的页面中遇到了一些dom问题。 这是我的密码：

$scope.tab2 = [
            {value:"value1"},
            {value:"value2"},
            {value:"value3"},
            {value:"value4"}
        ] ;

我用该变量填充选择框：

<select multiple ng-model="selectedInTab2" style="height:300px; width:300px;">
    <option ng-repeat="elt in tab2"  value="{{elt.value}}" > {{elt.value}} </option>
</select>

{{elt.value}

我有一个按钮，可以像这样从这个变量中删除元素 $scope.tab2.splice（selectedObjIndex，1）

问题是，从tab2中删除元素后，我在selectbox中看到一个空行。在chrome开发工具上，我看到：

<select multiple="" ng-model="selectedInTab2" style="height:300px; width:300px;">
    <option value="? string:3173 ?"></option>
    <!-- ngRepeat: value in tab2 -->
    <option ng-repeat="value in tab2" value="1356"> 1356 </option>
    <!-- end ngRepeat: value in tab2 -->
    <option ng-repeat="value in tab2" value="2248"> 2248 </option>
    <!-- end ngRepeat: value in tab2 -->
    <option ng-repeat="value in tab2" value="2434"> 2434 </option>
    <!-- end ngRepeat: value in tab2 -->
</select>

1356
2248
2434

如您所见，空行表示tab2变量中不再存在的值

---

在使用angularJs处理removeElement函数时，如何更新此selectbox的DOM？我知道我可以使用jQuery。

问题是：删除后，您需要启动新的

selected

值，例如通过更新

selectedtab2

。角度将

value=“？string:3173？”

设置为非选定值的默认值

所以试试这个：演示

HTML

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem"
            ng-options="selectedItem as selectedItem.value  for selectedItem in tab2"
    ></select>
     <p>
        <button ng-click="remove(tab2.indexOf(selectedItem))" >remove</button>
      </p>    
</div>

---

删除元素的代码在哪里？

function MyCtrl($scope) {
    $scope.tab2 = [
            {value:"value1"},
            {value:"value2"},
            {value:"value3"},
            {value:"value4"}
        ] ;

      $scope.selectedItem = $scope.tab2[0];
    $scope.remove = function(selectedObjIndex){

        console.log(selectedObjIndex);

    $scope.tab2.splice(selectedObjIndex, 1);
        $scope.selectedItem = $scope.tab2[0];
    };  

}