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

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

本文关键字：输入 标签 表单 动态 状态 添加 angularjs 何根 另一个 使用      更新时间：2023-09-26

我正在Angularjs中构造一个表单。根据表单中单选按钮的值，我想更改另一组单选按钮中的选项数。使用直接的DOM操作非常容易，但我看不出如何在angular中进行操作。

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

这里有一把小提琴，可能有你想要的。如果没有，我可以修改一下。

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

很容易使复选框的值控制输入字段，只需创建一个两人将通信的范围[可以使用默认值]

使用$scope.modelCheckbox作为复选框，使用$scope.modelInput用于输入，并在$scope.model复选框中更改值时禁用输入

它使用模型绑定的典型角度使用，因此您将在此处获得更多

相关文章：