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

时间:2015-12-22 08:58:58

标签: javascript angularjs angularjs-directive

我正在Angularjs中构建一个表单。根据表单中单选按钮的值,我想更改另一组单选按钮中的选项数。这很容易使用直接DOM操作,但我无法看到如何以角度进行操作。

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

2 个答案:

答案 0 :(得分: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);
  }
}

答案 1 :(得分:0)

很容易使复选框controll的值变为输入字段,只创建两个将进行通信的范围[可以使用默认值]

使用 $ scope.modelCheckbox 作为复选框,使用 $ scope.modelInput 作为输入,并在 $ scope.modelCheckbox中对值更改设置禁用输入

使用模型绑定的典型角度使用,您将获得更多http://msdn.microsoft.com/en-us/library/system.web.httprequest.inputstream.aspx