Question

我尝试使用AngularJS实现一个简单的功能，如下所示。在项目列表中，当用户单击某个项目并单击“删除”按钮时，该项目将被删除。 HTML：＆lt; div ng-app =＆＃34; app＆＃34; NG-控制器=＆＃34; MainController＆＃34;＆GT; ＆LT; DIV＆GT; ＆lt; select ng-options =＆＃34; item.name for items in items＆＃34; NG-模型=＆＃34; CURRENTITEM＆＃34;大小=＆＃34; 5＆＃34; style =＆＃34; width：200px＆＃34;＆gt;＆lt; / select＆gt; ＆LT; / DIV＆GT; ＆lt; button ng-click =＆＃34; removeItem（）＆＃34;＆gt;删除＆lt; / button＆gt; ＆LT; / DIV＆GT; 和脚本如下： angular.module（＆＃39; app＆＃39;，[]） .controller（＆＃39; MainController＆＃39;，function（$ scope）{ $ scope.items = [{ 名称：＆＃39; item1＆＃39; }，{ 名称：＆＃39; item2＆＃39; }，{ 名称：＆＃39; item3＆＃39; }]; $ scope.currentItem = $ scope.items [0]; $ scope.removeItem = function（）{ var index = $ scope.items.indexOf（$ scope.currentItem）; $ scope.items.splice（index，1）; }; }）; 问题是当我试图删除一个项目（即item2）时，列表总是在第一个位置显示一个空项目。当我点击＆＃39; item1＆＃39;或者＆＃39; item3＆＃39;，空项目消失。我知道这是由ng-model =＆＃34; currentItem＆＃34;在HTML中。 currentItem指向要删除的项，currentItem指向null。所以我改变了函数removeItem如下解决这个问题。 $ scope.removeItem = function（）{ var index = $ scope.items.indexOf（$ scope.currentItem）; $ scope.items.splice（index，1）; / *第1部分开始* / if（$ scope.items.length === 0）{ $ scope.currentItem = null; } else { if（index＆gt; = 0＆amp;＆amp; index＆lt; = $ scope.items.length - 1）{ $ scope.currentItem = $ scope.items [index]; } else { $ scope.currentItem = $ scope.items [$ scope.items.length - 1]; } } / *第1部分结束* / }; 我想知道AngularJS中是否有任何简单的方法（如指令）自动执行第1部分中的操作。

Answer 1

有一种简单的方法可以阻止只包括

 <option value="" ng-show="false"></option>

如下所示选择

<select ng-options="item as item.name for item in items" ng-model="currentItem" size="5" style="width: 200px">
   <option value="" ng-show="false"></option>
</select>

<强> Working Demo

更新1

我已经解决了不突出显示最后一项的问题，看看工作演示

$scope.removeItem = function () {
    var index = $scope.items.indexOf($scope.currentItem);
    $scope.items.splice(index, 1);
    index === $scope.items.length ? $scope.currentItem = $scope.items[index - 1] : $scope.currentItem = $scope.items[index];
};

<强> Working Demo

<select ng-options =“...”>的问题

1 个答案: