using angularjs, how do I dynamically add an input tag to a form based on the state of another input tag in the same form

Question

I am constructing a form in Angularjs. Based on the value of a radio button in the form, I want to change the number of options in another set of radio buttons. This is very easy using direct DOM manipulation, but I cannot see how to do it in angular.

I imagine that the solution lies in making the second set of radio buttons a directive, but I don't see how to communicate the state of the first set of radio buttons to the directive.

Also if you think its very easy to do with direct DOM, using angularjs will be 10 times easier — Subin Sebastian
– Subin Sebastian, Commented Dec 22, 2015 at 9:02
Hi, why don't you bind your second set of radio buttons to an array of literal objects in your scope ? Then, you just use "ng-repeat" on this array to display your radios buttons. Afterwards, you use "ng-click" on your first set of radio button and depending on the value of it, you add/remove an element in your array. Edit: Of course, if this is always the same modification (like add/remove a fixed number of radio button), you can simply use a ng-if) as "Subin" said. — ssougnez
– ssougnez, Commented Dec 22, 2015 at 9:03
Here is a code-pen codepen.io/SusanneLundblad/pen/iBhoJ which show and hide the content — Ravi Kumar Mistry
– Ravi Kumar Mistry, Commented Dec 22, 2015 at 9:11
Subin - what would using ngIf look like. Would the ngIf attribute be on each radio button tag? — garey
– garey, Commented Dec 22, 2015 at 10:09

Brian Baker · Accepted Answer · 2015-12-22 11:06:18Z

Here is a fiddle that may have what you're looking for. If not I can modify it a bit.

In yourfile.html:

<div ng-controller="MyCtrl">
  Hello, how many radio buttons!
  <br />

  <form name="form1">

  <label>
    <input type="radio" ng-model="optionCount" ng-change="optionsUpdated()" ng-value="0">0
  </label>
  <br/>
  <label>
    <input type="radio" ng-model="optionCount" ng-change="optionsUpdated()" value="1">1
  </label>
  <br/>
  <label>
    <input type="radio" ng-model="optionCount" ng-change="optionsUpdated()" value="2">2
  </label>
  <br/>
  <label>
     <input type="radio" ng-model="optionCount" ngchange="optionsUpdated()" value="3">3
  </label>
  <br/>
  </form>
  <hr> 
  There should be {{optionCount}} radio buttons!
  <br />
  <form name="form2">
    <div ng-repeat="radio in radioArray">
      <label>
      <input type="radio" ng-model="myOptions" value="1">Option {{$index + 1}}
      </label>
     <br/>
    </div>
  </form>
 </div>

And in yourfile.js:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.numOpts = [0, 1, 2, 3, 4]
  $scope.optionCount = 0;
  $scope.optionsUpdated = function() {
    var optionNum = Number($scope.optionCount)
    $scope.radioArray = new Array(optionNum);
  }
}

Dagm Fekadu · Accepted Answer · 2015-12-22 09:22:30Z

0

Its easy to make the value of the checkbox controll the input field just create a scope that the two will communicate [can use the default]

use $scope.modelCheckbox for the checkbox and $scope.modelInput for the input and set the input disabled on the value change in $scope.modelCheckbox

Its typical angular use using model binding so you will get more here

answered Dec 22, 2015 at 9:22

Dagm Fekadu

6101 gold badge8 silver badges23 bronze badges

Collectives™ on Stack Overflow

using angularjs, how do I dynamically add an input tag to a form based on the state of another input tag in the same form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related