How to add radio buttons and input fields using angularJS

Question

I was trying to add both input fields and corresponding radio buttons to my project using angularJS. Means when I click add, it will create one input field and 3 corresponding radio buttons together, as below picture. I could able to add input fields successfully when I click add. But having trouble in creating radio buttons also when I click add the iput field's placeholder should display input 1 and when click add again should display input 2 like that. Can someone help me on it. Following is my code.

Html portion:

<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>

and my angularJS part:

{{ 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);
  };
});

wait, now you posted static radio buttons but your question was about dynamic buttons? in fact, those input boxes and radio buttons you posted in the update aren't even connected to any angular model at all. — Claies
– Claies, Commented Aug 31, 2015 at 2:37
Ya. But am not sure how to add dynamic radio buttons. That's my main concern — blackwindow
– blackwindow, Commented Aug 31, 2015 at 2:39
well, it seems like you are thinking about this backwards. instead of trying to come up with how to dynamically add DOM elements, you should be thinking about how the data you are trying to represent is structured. If you have the data figured out, the DOM will be easy to match. — Claies
– Claies, Commented Aug 31, 2015 at 2:40
what data is it you are trying to gather with these buttons and input boxes? what relationship do the radio groups have with the input box? — Claies
– Claies, Commented Aug 31, 2015 at 2:42

Aviro · Accepted Answer · 2015-08-31 06:48:52Z

1

Refer the below attached Plunker, I have derived you an answer on how to modify DOM in order to add / remove elements from the current view.

Even though this will elaborate how to add elements, the removal process would be the same. Just remove the required element from the element list.

This is how you add radio buttons dynamically.

<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)
    });
}

answered Aug 31, 2015 at 6:48

Aviro

2,15523 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

blackwindow Over a year ago

But it returns an error as follows

Uncaught Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to: Error: [$injector:nomod] Module 'ui.bootstrap.demo' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Aviro Over a year ago

Comment the unnecessary line in the code as below 

blackwindow Over a year ago

The error is not there but its just not working.. cant understand why

Aviro Over a year ago

Can you prepare a plunker with your implementation. Also hope you did refer mine.

Aviro Over a year ago

I have enhanced the answer with Add / Remove elements from the DOM based on user input. Refer the modified answer.

|

Collectives™ on Stack Overflow

How to add radio buttons and input fields using angularJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related