AngularJS 表单 - 如何使用 ng-switch 创建和更新多个电子邮件
AngularJS Form - How to create and update several emails with ng-switch
我有一张表格可以添加/更新一封或多封电子邮件。第一个电子邮件字段是必填项。填写该字段后，可以单击 "Add email" 添加新的电子邮件地址。通过这种方式，可以添加另外 4 个电子邮件（总共 5 个电子邮件）。
系统可以验证电子邮件的格式是否正确并在必要时显示消息并将数据注册到数据库中。
这是我的看法(manageContact.html)
<h3>{{title}}</h3>
<div class="panel panel-default" ng-show="authorRole==1">
<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)">
<!---------------- FOR UPDATING EMAILS FIELDS ------------ START --->
<div ng-repeat="(key, email) in emails | limitTo : 5" style="z-index:6">
<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 email</span>
</a>
</div>
</div>
</div>
<!---------------- FOR UPDATING EMAILS FIELDS ------------ END --->
</form>
</div>
</div>
添加联系人一切正常，电子邮件已正确注册。
对于更新联系人，我对联系人的电子邮件有疑问。为了查看联系人注册的所有电子邮件，每次注册电子邮件以查看数据时，我当前的脚本都需要单击按钮 "Add email"。
如果电子邮件存在于数据库中，我想显示它们 - 所以每次显示行（字段+数据）。如果不存在，则需要单击添加新电子邮件的按钮。
你能帮我更新这段代码吗，因为我不能直接在 ng-switch 中这样做？
这里是我的控制器"ctrlEditContacts"和模块（app.js）：
var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog']);
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
return {
......
}
};
app.config(function($routeProvider, $httpProvider, ngDialogProvider){
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
$routeProvider.when('/add-contacts',
{
templateUrl: 'template/manageContact.html',
controller: 'ctrlAddContacts'
})
.when('/edit-contacts/:contactId',
{
templateUrl: 'template/manageContact.html',
controller: 'ctrlEditContacts'
})
.otherwise({redirectTo:'/all-requests'});
});
app.controller('ctrlAddContacts', function ($scope, ContactService){
$scope.title="Add a contact";
// Allow to create several fields EMAIL
$scope.emails = [
{
}];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push(dataObj);
}
$scope.submitForm = function(contact){
if($scope.ContactForm.$valid){
// Send the object to the backend for saving data
ContactService.addNewPerson(contact).success(function(Person){
$scope.ContactForm.$setPristine();
$scope.contact= Person;
});
}
}
});
app.controller('ctrlEditContacts', function ($scope, $routeParams, MyTextSearch, ContactService, ngDialog, $timeout){
//FOR ALLOWING SEVERAL 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";
}
ContactService.loadPersonById($routeParams.contactId).success(function(contact){
$scope.contact.ID = contact[0].ID;
$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;
})
.error(function (data, status, header, config) {
console.log("Query loadPersonById ERROR");
console.log("status:" + status);
if (status==302) {
alert("Session expired - New Authentication requested");
}
}).finally(function() {
});
$scope.submitForm = function(contact){
if($scope.ContactForm.$valid){
ContactService.updatePerson(contact, $routeParams.contactId).success(function(){
alert('Person updated successfully');
})
.error(function (data, status, header, config) {
})
.finally(function() {
});
}
};
});
这里是我的工厂(appService.js)
app.factory('ContactService', function($http){
var factory={};
factory.addNewPerson=function(objContact){
return $http.get('http://myapp/contacts.cfc?method=addNewPerson&jsStruct=' + JSON.stringify(objContact))
};
factory.updatePerson=function(objContact,id){
var params = {
method: "updatePerson",
contactid: id,
jsStruct: objContact
};
var config = { params: params };
return $http.get('http://myapp/contacts.cfc', config)
};
return factory;
})
如果你有比 ng-switch 更好的解决方案，请告诉我。
预先感谢您的帮助。
在 ContactService.loadPersonById()
中填充 $scope.emails
我更新了控制器：
app.controller('ctrlEditContacts', function ($scope, $routeParams, ContactService, ngDialog, $timeout){
//FOR ALLOWING SEVERAL EMAILS
$scope.emails = [];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push({});
};
$scope.contact={};
if($routeParams.contactId){
$scope.title="Edit the contact";
$scope.edit_oldContact = "true";
}
ContactService.loadPersonById($routeParams.contactId).success(function(contact){
console.log("Query loadPersonById OK");
$scope.contact.ID = contact[0].ID;
$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;
// GET the emails already registered for displaying in the contact edit form
if($scope.contact.EMAIL.length > 0) {
$scope.emails.push($scope.contact.EMAIL);
}
if($scope.contact.EMAIL_1.length > 0) {
$scope.emails.push($scope.contact.EMAIL_1);
}
if($scope.contact.EMAIL_2.length > 0) {
$scope.emails.push($scope.contact.EMAIL_2);
}
if($scope.contact.EMAIL_3.length > 0) {
$scope.emails.push($scope.contact.EMAIL_3);
}
if($scope.contact.EMAIL_4.length > 0) {
$scope.emails.push($scope.contact.EMAIL_4);
}
})
.error(function (data, status, header, config) {
console.log("Query loadPersonById ERROR");
console.log("status:" + status);
}).finally(function() {
console.log("Query loadPersonById Finalized");
});
$scope.submitForm = function(contact){
//console.log(contact);
};
});
和模板：
<!---------------- FOR UPDATING EMAILS FIELDS ------------ START --->
<div ng-repeat="(key, email) in emails | limitTo : 5" style="z-index:6">
<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 ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$error.emailExists" 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>
This email is already used
<ul id="contacts_list">
<li ng-repeat=" cont in ContactForm['txtEmail_' + $index].persons" style="position:relative; z-index:1">
<div angular-popover direction="right" template-url="template/popover.html" mode="mouseover">
<a href="#/view-contacts/{{cont.id}}">{{ cont.lastname }} {{ cont.firsttname }}</a>
</div>
</li>
</ul>
</div>
<div ng-if="ContactForm['txtEmail_' + $index].$pending.emailExists">checking....</div>
<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>
</div>
<div class="col-sm-1" ng-show="$index == emails.length - 1">
<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 UPDATING EMAILS FIELDS ------------ END --->
我有一张表格可以添加/更新一封或多封电子邮件。第一个电子邮件字段是必填项。填写该字段后，可以单击 "Add email" 添加新的电子邮件地址。通过这种方式，可以添加另外 4 个电子邮件（总共 5 个电子邮件）。
系统可以验证电子邮件的格式是否正确并在必要时显示消息并将数据注册到数据库中。
这是我的看法(manageContact.html)
<h3>{{title}}</h3>
<div class="panel panel-default" ng-show="authorRole==1">
<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)">
<!---------------- FOR UPDATING EMAILS FIELDS ------------ START --->
<div ng-repeat="(key, email) in emails | limitTo : 5" style="z-index:6">
<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 email</span>
</a>
</div>
</div>
</div>
<!---------------- FOR UPDATING EMAILS FIELDS ------------ END --->
</form>
</div>
</div>
添加联系人一切正常，电子邮件已正确注册。 对于更新联系人，我对联系人的电子邮件有疑问。为了查看联系人注册的所有电子邮件，每次注册电子邮件以查看数据时，我当前的脚本都需要单击按钮 "Add email"。 如果电子邮件存在于数据库中，我想显示它们 - 所以每次显示行（字段+数据）。如果不存在，则需要单击添加新电子邮件的按钮。
你能帮我更新这段代码吗，因为我不能直接在 ng-switch 中这样做？
这里是我的控制器"ctrlEditContacts"和模块（app.js）：
var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog']);
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
return {
......
}
};
app.config(function($routeProvider, $httpProvider, ngDialogProvider){
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
$routeProvider.when('/add-contacts',
{
templateUrl: 'template/manageContact.html',
controller: 'ctrlAddContacts'
})
.when('/edit-contacts/:contactId',
{
templateUrl: 'template/manageContact.html',
controller: 'ctrlEditContacts'
})
.otherwise({redirectTo:'/all-requests'});
});
app.controller('ctrlAddContacts', function ($scope, ContactService){
$scope.title="Add a contact";
// Allow to create several fields EMAIL
$scope.emails = [
{
}];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push(dataObj);
}
$scope.submitForm = function(contact){
if($scope.ContactForm.$valid){
// Send the object to the backend for saving data
ContactService.addNewPerson(contact).success(function(Person){
$scope.ContactForm.$setPristine();
$scope.contact= Person;
});
}
}
});
app.controller('ctrlEditContacts', function ($scope, $routeParams, MyTextSearch, ContactService, ngDialog, $timeout){
//FOR ALLOWING SEVERAL 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";
}
ContactService.loadPersonById($routeParams.contactId).success(function(contact){
$scope.contact.ID = contact[0].ID;
$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;
})
.error(function (data, status, header, config) {
console.log("Query loadPersonById ERROR");
console.log("status:" + status);
if (status==302) {
alert("Session expired - New Authentication requested");
}
}).finally(function() {
});
$scope.submitForm = function(contact){
if($scope.ContactForm.$valid){
ContactService.updatePerson(contact, $routeParams.contactId).success(function(){
alert('Person updated successfully');
})
.error(function (data, status, header, config) {
})
.finally(function() {
});
}
};
});
这里是我的工厂(appService.js)
app.factory('ContactService', function($http){
var factory={};
factory.addNewPerson=function(objContact){
return $http.get('http://myapp/contacts.cfc?method=addNewPerson&jsStruct=' + JSON.stringify(objContact))
};
factory.updatePerson=function(objContact,id){
var params = {
method: "updatePerson",
contactid: id,
jsStruct: objContact
};
var config = { params: params };
return $http.get('http://myapp/contacts.cfc', config)
};
return factory;
})
如果你有比 ng-switch 更好的解决方案，请告诉我。
预先感谢您的帮助。
在 ContactService.loadPersonById()
中填充 $scope.emails我更新了控制器：
app.controller('ctrlEditContacts', function ($scope, $routeParams, ContactService, ngDialog, $timeout){
//FOR ALLOWING SEVERAL EMAILS
$scope.emails = [];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push({});
};
$scope.contact={};
if($routeParams.contactId){
$scope.title="Edit the contact";
$scope.edit_oldContact = "true";
}
ContactService.loadPersonById($routeParams.contactId).success(function(contact){
console.log("Query loadPersonById OK");
$scope.contact.ID = contact[0].ID;
$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;
// GET the emails already registered for displaying in the contact edit form
if($scope.contact.EMAIL.length > 0) {
$scope.emails.push($scope.contact.EMAIL);
}
if($scope.contact.EMAIL_1.length > 0) {
$scope.emails.push($scope.contact.EMAIL_1);
}
if($scope.contact.EMAIL_2.length > 0) {
$scope.emails.push($scope.contact.EMAIL_2);
}
if($scope.contact.EMAIL_3.length > 0) {
$scope.emails.push($scope.contact.EMAIL_3);
}
if($scope.contact.EMAIL_4.length > 0) {
$scope.emails.push($scope.contact.EMAIL_4);
}
})
.error(function (data, status, header, config) {
console.log("Query loadPersonById ERROR");
console.log("status:" + status);
}).finally(function() {
console.log("Query loadPersonById Finalized");
});
$scope.submitForm = function(contact){
//console.log(contact);
};
});
和模板：
<!---------------- FOR UPDATING EMAILS FIELDS ------------ START --->
<div ng-repeat="(key, email) in emails | limitTo : 5" style="z-index:6">
<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 ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$error.emailExists" 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>
This email is already used
<ul id="contacts_list">
<li ng-repeat=" cont in ContactForm['txtEmail_' + $index].persons" style="position:relative; z-index:1">
<div angular-popover direction="right" template-url="template/popover.html" mode="mouseover">
<a href="#/view-contacts/{{cont.id}}">{{ cont.lastname }} {{ cont.firsttname }}</a>
</div>
</li>
</ul>
</div>
<div ng-if="ContactForm['txtEmail_' + $index].$pending.emailExists">checking....</div>
<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>
</div>
<div class="col-sm-1" ng-show="$index == emails.length - 1">
<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 UPDATING EMAILS FIELDS ------------ END --->