使用 angular js 在用户单击时动态添加表单字段 [英] add form fields dynamically on user click using angular js

查看:33
本文介绍了使用 angular js 在用户单击时动态添加表单字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

添加子按钮无法正常工作(应在用户单击时添加各种字段(名字、名字、姓氏、学生和情景字段).详细信息:我正在尝试创建一个包含五个输入字段(名字、中间名、姓氏和两个单选按钮)的表单,如果用户单击添加子按钮应创建一个新的五个输入字段.

注意:我使用指令来调用这个表单).

 

<div layout-gt-sm="row" layout-align="center"><div id="横幅"><p><span>步骤 1</span>列出所有 12 年级以下的婴儿、儿童和学生的家庭成员.

<md-content layout-padding><表格名称="表格"><fieldset layout-gt-sm="row" layout-align="center" data-ng-repeat="child in childern"><md-input-container class="md-block"><label>名字</label><input required name="firstName" ng-model="child.firstName"><div ng-messages="Form.firstName.$error"><div ng-message="required">名字是必需的.</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 ">中间名是必需的.</div>

</md-input-container><md-input-container class="md-block"><label>姓氏</label><input required name="lastName" ng-model="child.lastName"><div ng-messages="Form.lastName.$error"><div ng-message="required ">Last Name 是必需的.</div>

</md-input-container><div class="单元格"><标签><b>学生?</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">没有 </md-radio-button></md-radio-group>

<div class="cell"><标签><b>孩子的情况?</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">无家可归、移民、逃亡 </md-radio-button></md-radio-group>

</fieldset></表单><div layout-gt-sm="row" layout-align="center"><md-button class="md-raised md-primary" ng-click="Step1Ctrl.addChild()">添加子项</md-button>

</md-content>

javascript

 var form = angular .模块 ('myform'['ngMaterial','ngAnimate''ngMessages','ngRoute']);form.directive('myStep1', function () {return { templateUrl:'step1-form.html'};});form.controller('Step1Ctrl', function ($scope) {$scope.childern = [];$scope.addChild = 函数 () {$scope.childern.push({});};$scope.removeChild = 函数 () {};});

解决方案

你不需要提到ng-click 表达式作为控制器的方法(_Not like Controller.methodName() 只是把它表达成methodName())

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

<div ng-controller="Step1Ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp"><md-content class="md-padding"><表格名称="表格"><fieldset layout-gt-sm="row" layout-align="center" data-ng-repeat="child in childern"><md-input-container class="md-block"><label>名字</label><input required name="firstName" ng-model="child.firstName"><div ng-messages="Form.firstName.$error"><div ng-message="required">名字是必需的.</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 ">中间名是必需的.</div>

</md-input-container><md-input-container class="md-block"><label>姓氏</label><input required name="lastName" ng-model="child.lastName"><div ng-messages="Form.lastName.$error"><div ng-message="required ">姓氏是必需的.</div>

</md-input-container><div class="单元格"><标签><b>学生?</b><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 class="cell"><标签><b>孩子的情况?</b><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">无家可归者、移民、逃亡者</md-radio-button></md-radio-group>

</fieldset></表单><div layout-gt-sm="row" layout-align="center"><md-button class="md-raised md-primary" ng-click="addChild()">添加子项</md-button>

</md-content>

Codepen 在这里

add child button does not work as suppose to be (should add various fields when user click (first,mi,last name ,student ,and situation fields). details: i am trying to create a form consist of five inputs fields(first name ,middle name , last name and two radio buttons ) and if user click add child button should create a new five inputs fields .

NOTE : i use directive to call this form ).

 <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 () {

};
  });

解决方案

You don't need to mention ng-click expression as a method of controller(_Not like Controller.methodName() just express it like methodName())

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

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

      };
    });

<div ng-controller="Step1Ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp">
  <md-content class="md-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="addChild()">Add Child</md-button>
    </div>
  </md-content>
</div>

Codepen here

这篇关于使用 angular js 在用户单击时动态添加表单字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆