使用 angular js 在用户单击时动态添加表单字段
add form fields dynamically on user click using angular js
添加子项按钮无法正常工作(当用户单击时应添加各种字段(名字、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 () {
};
});
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>
添加子项按钮无法正常工作(当用户单击时应添加各种字段(名字、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 () {
};
});
You don't need to mention
ng-click
expression as a method of controller(_Not likeController.methodName()
just express it likemethodName()
)
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>