javascript - 如何访问 AngularJS 中组合框的选定元素？

Question

我将一个数组放入组合框中，并希望在按下按钮时删除标记的元素(通过单击组合框中的元素选择)。我如何访问所选元素？

我的html:

<div ng-controller="MyCtrl">
<select size="5">
    <option ng-repeat="element in elements">{{element}}</option>    
</select>
<button ng-click="removeSelected()">Delete selected</button>   

我的js:

function MyCtrl($scope) {
    $scope.elements = [1, 2, 3];
    $scope.removeSelected = function () {};
}

这是我的 Fiddle .

Answer 1

您需要使用ng-options而不是 ng-repeat。

ng-options 是一个应用于父选择元素的指令，如下所示:

<select ng-options="element for element in elements" ng-model="selected">
</select>

然后，您可以继续通过 select 元素的 ng-model 访问事件选择，在本例中为 selected - 并将其删除，如下所示:

$scope.removeSelected = function(){
    var index = $scope.elements.indexOf($scope.selected);
    $scope.elements.splice(index, 1)
};  

Updated fiddle.