Question

我在角度页面面临着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>

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

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

<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>

因此，正如您所看到的那样，空行表示，而不是tab2变量。

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

Answer 1

问题是：删除后您需要启动新的selected值，例如更新selectedInTab2。 Angular将value="? string:3173 ?"设置为非选定值的默认值。

试试这个：演示 Fiddle

<强> 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>

<强> JS

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];
    };  

}

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

1 个答案: