如何为ng-repeat指令中的多项选择添加动态选项？

在使用AngularJS中的ng-repeat指令创建自定义列表时，您可能需要将多项选择添加到列表中。通常，您可以使用静态数据作为多项选择的选项。但是，在某些情况下，您可能需要在分配给ng-repeat指令的列表中动态添加多项选择。在本文中，我将为您介绍如何为ng-repeat指令中的多项选择添加动态选项。

使用ng-repeat指令创建多项选择列表

首先，让我们看一下如何使用ng-repeat指令创建多项选择列表。以下示例使用ng-repeat指令创建包含三个选项的多项选择列表。

<select ng-model="selectedOption">
  <option ng-repeat="option in options" value="{{option}}">{{option}}</option>
</select>

在上面的示例中，我们定义了一个名为“options”的作用域变量，其中包含三个选项。我们使用ng-repeat指令将这三个选项动态地添加到下拉列表中。

将动态选项添加到多项选择列表

现在，我们可以通过在作用域中定义新的选项来轻松地将动态选项添加到多项选择列表中。以下是如何使用AngularJS在ng-repeat指令中添加动态选项的示例代码。

<select ng-model="selectedOption">
  <option ng-repeat="option in options" value="{{option}}">{{option}}</option>
  <option value="{{newOption}}" ng-show="showAddOption">Add New Option</option>
</select>

<input type="text" ng-model="newOption"/>
<button ng-click="addNewOption()">Add Option</button>

在上面的示例中，我们添加了一个名为“newOption”的作用域变量，以便用户可以输入新的选项。我们还将一个按钮添加到页面上，以便用户可以单击该按钮并将新选项添加到列表中。但是，我们还需要添加一些额外的逻辑，以确保只有在用户单击“Add Option”按钮时才会显示“Add New Option”选项。为此，请在控制器中添加以下代码。

$scope.showAddOption = false;

$scope.addNewOption = function() {
  $scope.options.push($scope.newOption);
  $scope.newOption = "";
  $scope.showAddOption = false;
};

$scope.$watch("newOption", function(newValue) {
  $scope.showAddOption = newValue !== undefined && newValue !== "";
});

在上面的控制器代码中，我们向控制器添加了一个名为“showAddOption”的作用域变量。这个变量用来控制显示“Add New Option”选项的状态。我们还添加了一个名为“addNewOption()”的函数，该函数在用户单击“Add Option”按钮时将新选项添加到列表中。最后，我们使用$watch来监视新选项的状态，并根据需要显示或隐藏“Add New Option”选项。

结论

现在，您已经了解了如何使用AngularJS添加动态选项到ng-repeat指令中的多选列表中。虽然这需要一些额外的代码，但这种方法允许用户动态地将选项添加到列表中，这是创建更灵活的UI的关键。