使用angularjs，如何基于同一表单中另一个输入标签的状态将输入标签动态添加到表单

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.

Answer 1

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

Answer 2

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