Question

我是AngularJS的新手。在我的场景中，用户必须创建一个mcq问题。该问题有4个默认选项，其中一个选项是正确的。现在，作为教师的用户可以为该问题提供大于或小于4的选项。所以它的选项数量可变。如果硬编码输入如下

<input name = "input0" type = "text", class = "form-control" ng-model = "input_0" required>

<input name = "input1" type = "text", class = "form-control" ng-model = "input_1" required>

等等它运作良好。我想在这里使用动态解决方案，因此教师提供的选项无关紧要。

我想做的是

$ scope.mcq_options = [$ scope.input_0，$ scope.input_1 ...]

在html模板中使用ng-repeat并执行类似

的操作

<div ng-repeat = "input in mcq_options">
<input name = "input1" type = "text", class = "form-control" ng-model = "input" required>

用于从数组中删除splice条目
用于在数组中添加更多推送条目

Answer 1

解决方案非常简单（Associated PLUNKER）：

1 创建一个空数组，您可以在控制器中存储所有选项。

var inputArray = $scope.inputArray = [];

[2] 创建一个添加新选项的功能。

$scope.addNewOption = function() {
   inputArray.push('');
};

[3] 创建另一个函数来拼接一个接受要删除的选项索引的选项条目。

$scope.removeOption = function(index) {
  inputArray.splice(index, 1);
};

[4] 您的观点可能是这样的：

    <form name="form" novalidate>
      <div ng-repeat="input in inputArray track by $index" ng-form="subform">
        <input name="input" type="text" ng-model="inputArray[$index]" required> <button ng-click="removeOption($index)">Remove</button>
        <br>
        <span ng-show="subform.input.$error.required">This field is rqeuired</span>
      </div>
      <button ng-click="addNewOption()">Add New Option</button>
    </form>

注意：

track by $index指令中的ng-repeat有助于避免重复值错误。
ng-form指令可帮助您验证每次ng-repeat次迭代中创建的每个模型。
不使用input指令中的ng-repeat值，而是使用ng-repeat的$index属性来使用其直接引用。如果您不这样做，inputArray中的更改可能会影响输入的当前ngModel引用。例如添加或删除选项会给你带来奇怪的行为。

使用ng-model数组

1 个答案: