我想创建一个包含多个字段的表单：姓名，姓氏，...并添加一个或多个电子邮件。第一个电子邮件字段是必填字段在他应该有可能点击＆＃34;添加电子邮件＆＃34;用于添加新电子邮件地址。他可以添加另外4封电子邮件（总共5封电子邮件）。
系统应验证电子邮件的格式是否正确，必要时显示消息并在数据库中注册数据。
这里我的控制器＆＃34; ctrlEditContacts＆＃34;和模块（app.js）：
var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog']);
// register the interceptor as a service
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
return {
// On request success
request : function(config) {
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError : function(rejection) {
//console.log(rejection); // Contains the data about the error on the request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response : function(response) {
//console.log(response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failure
responseError : function(rejection) {
//console.log(rejection); // Contains the data about the error.
//Check whether the intercept param is set in the config array.
//If the intercept param is missing or set to true, we display a modal containing the error
if (typeof rejection.config.intercept === 'undefined' || rejection.config.intercept)
{
//emitting an event to draw a modal using angular bootstrap
$rootScope.$emit('errorModal', rejection.data);
}
// Return the promise rejection.
return $q.reject(rejection);
}
};
}]);
app.config(function($routeProvider, $httpProvider, ngDialogProvider){
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
ngDialogProvider.setDefaults({
className: 'ngdialog-theme-default',
plain: false,
showClose: true,
closeByDocument: true,
closeByEscape: true,
appendTo: false,
preCloseCallback: function () {
console.log('default pre-close callback');
}
});
.when('/edit-contacts/:contactId',
{
templateUrl: 'template/manageContact.html',
controller: 'ctrlEditContacts'
})
.otherwise({redirectTo:'/all-contacts'});
});
app.factory('httpInterceptor', function ($q, $rootScope, $log) {
var numLoadings = 0;
return {
request: function (config) {
numLoadings++;
// Show loader
$rootScope.$broadcast("loader_show");
return config || $q.when(config)
},
response: function (response) {
if ((--numLoadings) === 0) {
// Hide loader
$rootScope.$broadcast("loader_hide");
}
return response || $q.when(response);
},
responseError: function (response) {
if (!(--numLoadings)) {
// Hide loader
$rootScope.$broadcast("loader_hide");
}
return $q.reject(response);
}
};
})
app.controller('ctrlEditContacts', function ($scope, $routeParams, ContactService){
// Sort of requests table
$scope.champTri = null;
$scope.triDescendant = false;
$scope.SortPersons = function(champ) {
if ($scope.champTri == champ) {
$scope.triDescendant = !$scope.triDescendant;
} else {
$scope.champTri = champ;
$scope.triDescendant = false;
}
}
$scope.cssChevronsTri = function(champ) {
return {
glyphicon: $scope.champTri == champ,
'glyphicon-chevron-up' : $scope.champTri == champ && !$scope.triDescendant,
'glyphicon-chevron-down' : $scope.champTri == champ && $scope.triDescendant
};
}
// MANAGE THE EMAILS
$scope.emails = [
{
}];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push(dataObj);
}
$scope.contact={};
if($routeParams.contactId){
$scope.title="Edit the contact";
}
// GET DATA FROM THE DB ABOUT THE CONTACT
ContactService.loadPersonById($routeParams.contactId).success(function(contact){
$scope.contact.ID = contact[0].ID;
$scope.contact.LASTNAME = contact[0].LASTNAME;
$scope.contact.FIRSTNAME = contact[0].FIRSTNAME;
$scope.contact.EMAIL = contact[0].EMAIL;
$scope.contact.EMAIL_1 = contact[0].EMAIL_1;
$scope.contact.EMAIL_2 = contact[0].EMAIL_2;
$scope.contact.EMAIL_3 = contact[0].EMAIL_3;
$scope.contact.EMAIL_4 = contact[0].EMAIL_4;
});
$scope.submitForm = function(contact){
console.log(contact);
if($scope.ContactForm.$valid){
ContactService.updatePerson(contact, $routeParams.contactId).success(function(){
/*$scope.ContactForm.$setPristine();
$scope.contact= null;*/
alert('Person updated successfully');
window.location="#/view-contacts/" + $scope.contact.ID;
});
}
};
});
我的工厂（appService.js）
app.factory('ContactService', function($http){
var factory={};
factory.loadPersonById=function(id){
return $http.get('http://myapp/contacts.cfc?method=loadPersonById&idPerson=' + id);
};
factory.updatePerson=function(objContact,id){
return $http.get('http://myapp/contacts.cfc?method=updatePerson&contactid=' + id + '&jsStruct=' + JSON.stringify(objContact))
};
return factory;
})
后端（服务器）中的函数检索后端发送的参数objContact并正确执行查询（它正在工作）
此处我的观点（manageContact.html）
<h3>{{title}}</h3>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Person Sheet</div>
</div>
<div class="panel-body">
<form name="ContactForm" class="form-horizontal" role="form" novalidate ng-submit="submitForm(contact)">
<div class="form-group">
<label for="txtLastName" class="col-sm-2 control-label">Last Name *</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtLastName" maxlength="100" placeholder="Enter Last Name" required ng-model="contact.LASTNAME">
</div>
</div>
<!---------------- FOR ADDING EMAILS FIELDS ------------ START --->
<div ng-repeat="(key, email) in emails | limitTo : 5">
<div class="form-group">
<span ng-switch="$index">
<label ng-switch-when="0" for="txtEmail" class="col-sm-2 control-label">Main email</label>
<label ng-switch-default for="txtEmail" class="col-sm-2 control-label">Email {{$index+1}}</label>
</span>
<div class="col-sm-9" ng-switch="$index">
<input ng-switch-when="0" type="email" class="form-control" name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter main email" ng-model="contact.EMAIL">
<input ng-switch-default type="email" class="form-control" name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter Email {{$index+1}}" ng-model="contact.EMAIL_$index">
<div class="error-container"
ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$invalid">
<div ng-show="ContactForm['txtEmail_' + $index].$error.email" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
That is not a valid email. Please input a valid email.
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.required" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email is required.
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.minlength" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email is required to be at least 3 characters
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.maxlength" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email cannot be longer than 20 characters
</div>
</div>
</div>
<div class="col-sm-1" ng-show="$index == 0">
<a href="" ng-click="add()" ng-show="emails.length<5" class="inline btn btn-primary icon_email">
<span class="glyphicon glyphicon-plus icon2"></span><span class="addButton">Add</span>
</a>
</div>
</div>
</div>
<!---------------- FOR ADDING EMAILS FIELDS ------------ END--->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="Submit" ng-disabled="ContactForm.$invalid">
<a href="#/view-contacts/{{contact.ID}}" class="inline btn btn-primary">Cancel</a>
</div>
</div>
</form>
</div>
</div>
如果已定义，则EMAILS（EMAIL_1，EMAIL_2，EMAIL_3，...）的值不会显示在表单中。
我试图放contact.EMAIL_$index或contact.EMAIL_[$index]或contact.EMAIL_[key]，但它无效。
你能帮我吗？
感谢您的支持
答案 0 :(得分：1)
在您的HTML替代
中ng-model =＆＃34; contac.EMAIL_ $ index with
<强> NG-模型=＆＃34;接触[＆＃39; EMAIL _＆＃39; + $指数]＆＃34;
并在您的控制器中检查您在服务答案中的每封电子邮件前面的推送电子邮件
示例：
ContactService.loadPersonById($routeParams.contactId).then(function(contact){
for(var i = 0; i < 5; i++){
$scope.emails.push({});
}// i add this to tell we have 5 mails
$scope.contact.ID = contact[0].ID;
$scope.contact.LASTNAME = contact[0].LASTNAME;
$scope.contact.FIRSTNAME = contact[0].FIRSTNAME;
$scope.contact.EMAIL = contact[0].EMAIL;
$scope.contact.EMAIL_1 = contact[0].EMAIL_1;
$scope.contact.EMAIL_2 = contact[0].EMAIL_2;
$scope.contact.EMAIL_3 = contact[0].EMAIL_3;
$scope.contact.EMAIL_4 = contact[0].EMAIL_4;
});