Question

我试图使用angularJS将输入字段和相应的单选按钮添加到我的项目中。意思是当我点击添加时，它会一起创建一个输入字段和3个相应的单选按钮，如下图所示。单击添加后，我可以成功添加输入字段。但是，当我单击添加输入字段的占位符时，在创建单选按钮时遇到问题应该显示输入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)
    });
}

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

1 个答案: