Question

添加子按钮不起作用（应在用户点击时添加各种字段（第一，mi，姓氏，学生和情境字段）。详细信息：我正在尝试创建一个由五个输入字段（名字，中间名，姓氏和两个单选按钮）组成的表单，如果用户单击“添加子项”按钮，则应创建一个新的五个输入字段。

注意：我使用指令来调用此表单。）

 <div ng-controller="Step1Ctrl" layout="column" layout-align="center">
 <div layout-gt-sm="row" layout-align="center">
     <div id="banner">
         <p> <span>STEP 1</span> List all household members who are infants,  children, and students up to and including grade 12</p>
    </div>
</div>
<md-content layout-padding>

    <form name="Form">

        <fieldset layout-gt-sm="row" layout-align="center" data-ng-repeat="child in childern">

            <md-input-container class="md-block">
                <label>First Name</label>
                <input required name="firstName" ng-model="child.firstName">
                <div ng-messages="Form.firstName.$error">
                    <div ng-message="required">First Name is required.</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block" style="max-width:60px;">
                <label>MI</label>
                <input required name=" middleName " ng-model="child.middleName ">
                <div ng-messages="Form.middleName.$error ">
                    <div ng-message="required ">Middle Name is required.</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block ">
                <label>Last Name</label>
                <input required name="lastName " ng-model="child.lastName ">
                <div ng-messages="Form.lastName.$error ">
                    <div ng-message="required ">Last Name is required.</div>
                </div>
            </md-input-container>

            <div class="cell ">
                <label> <b>Student?</b></label>
                <div class="box">
                    <md-radio-group ng-model="child.IsStudent">
                        <md-radio-button value="Yes">Yes</md-radio-button>
                        <md-radio-button value="No"> No </md-radio-button>
                    </md-radio-group>
                </div>
            </div>

            <div class="cell">
                <label><b> Child's situation? </b></label>
                <div class="box">
                    <md-radio-group ng-model="child.situation">
                        <md-radio-button value="Foster Child">Foster Child </md-radio-button>
                        <md-radio-button value="HMR"> Homeless, Migrant, Runaway </md-radio-button>
                    </md-radio-group>
                </div>
            </div>
        </fieldset>

    </form>
    <div layout-gt-sm="row" layout-align="center">
        <md-button class="md-raised md-primary" ng-click="Step1Ctrl.addChild()">Add Child</md-button>
    </div>

</md-content>
</div>

javascript

         var form =  angular . module ( 'myform'[ 'ngMaterial','     ngAnimate''ngMessages','ngRoute']);  

      form.directive('myStep1', function () {return { templateUrl: 
  'step1-form.html'};});
      form.controller('Step1Ctrl', function ($scope) {
$scope.childern = [];

$scope.addChild = function () {
    $scope.childern.push({});
};
$scope.removeChild = function () {

};
  });

Answer 1

您不需要提及"D:/inforLogs/2016/01/"表达式作为控制器的方法（_不像ng-click只是表达它像Controller.methodName()）

试试这个：

methodName()

  angular
    .module('MyApp', ['ngMaterial', 'ngMessages'])
    .controller('Step1Ctrl', function($scope) {
      $scope.childern = [{}];

      $scope.addChild = function() {
        $scope.childern.push({});
      };
      $scope.removeChild = function() {

      };
    });

Codepen here

使用angular js在用户单击时动态添加表单字段

1 个答案: