如何使用 angularJS 添加单选按钮和输入字段

Question

我试图使用 angularJS 将输入字段和相应的单选按钮添加到我的项目中。意味着当我点击添加时，它会一起创建一个输入字段和三个相应的单选按钮，如下图所示。单击添加时，我可以成功添加输入字段。但是，当我单击添加时，在创建单选按钮时也遇到问题，输入字段的占位符应显示输入 1，再次单击添加时应显示输入 2。有人可以帮我吗。以下是我的代码。

HTML 部分：

<table class="table">
<tr class="tr_class">
    <td></td>
    <td></td>
    <td align="center"><b>functional check </b></td>
    <td align="center"><b>XXissue</b></td>
    <td align="center"><b>YY risk</b></td>
</tr>

<tr class="tr_class">
    <td class="td_class"><div class="input-group">
        <span class="input-group-addon">input 1</span>
        <input type="text" class="form-control" placeholder="input 1">
    </div> <br/></td>
    <td> </td>
    <td align="center"><input type="radio" name="a1"></td>
    <td align="center"><input type="radio" name="a1"></td>
    <td align="center"><input type="radio" name="a1"></td>
</tr>
<tr>
    <td><div class="input-group">
        <span class="input-group-addon">Check2</span>
        <input type="text" class="form-control" placeholder="input 2">
    </div> <br/></td>
    <td></td>
    <td align="center"><input type="radio" name="a2"></td>
    <td align="center"><input type="radio" name="a2" ></td>
    <td align="center"><input type="radio" name="a2" ></td>
</tr>
<tr>
    <td><div class="input-group">
        <span class="input-group-addon">input 3</span>
        <input type="text" class="form-control" placeholder="input 3">
    </div> <br/></td>
    <td></td>
    <td align="center"><input type="radio" name="a3"></td>
    <td align="center"><input type="radio" name="a3"></td>
    <td align="center"><input type="radio" name="a3"></td>
</tr>

<br><br>

<tr>

    <td><div ng-controller="AlertDemoCtrl">
        <input type="text" class="form-control" placeholder="input 3" ng-repeat="alert in alerts"
               type="{{success.type}}" close="closeAlert($index)">{{success.msg}}<br></input>
        <button type="button" class='btn btn-info' ng-click="addAlert()">+Add input</button>
        <button type="reset" class="btn btn-danger">Reset</button>
    </div> <br><br><br></td></tr>

还有我的 angularJS 部分：

{{ ngapp }}.controller('AlertDemoCtrl', function ($scope) {
  $scope.alerts = [
  ];

  $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!'});
  };

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
});

Answer 1

请参阅下面附加的Plunker，我已经为您提供了有关如何修改 DOM 以便从当前视图中添加/删除元素的答案。

尽管这将详细说明如何添加元素，但删除过程是相同的。只需从元素列表中删除所需的元素。

这是动态添加单选按钮的方式。

<td ng-repeat="answer in question.answersList track by $index">
  <input type="radio" name="{{$parent.$index}}" ng-value="1" ng-model="answer.is_correct">
</td>

$scope.addRow = function() {
  $scope.questionList.push({
        "question_num": $scope.questionList.length+1,
        "answersList": [
            {
                "is_correct": "0",
                "answer_text": "Answer 1",
                "feedback": "Feedback 1"
            },
            {
                "is_correct": "0",
                "answer_text": "Answer 2",
                "feedback": "Feedback 2"
            },
            {
                "is_correct": "1",
                "answer_text": "Answer 3",
                "feedback": "Feedback 3"
            }
        ],
        "question_text": "Sample Question" + ($scope.questionList.length+1)
    });
}