javascript - 使用 angularjs，如何根据同一表单中另一个输入标签的状态动态地将输入标签添加到表单中

Question

我正在 Angularjs 中构建一个表单。根据表单中单选按钮的值，我想更改另一组单选按钮中的选项数量。使用直接 DOM 操作这非常容易，但我不知道如何在 Angular 中做到这一点。

我认为解决方案在于将第二组单选按钮设为指令，但我不知道如何将第一组单选按钮的状态传达给指令。

Answer 1

这是一个fiddle那可能有您正在寻找的东西。如果没有我可以稍微修改一下。

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

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