添加多个电子邮件并显示定义的值

Question

我的表单允许更新和添加多个电子邮件。第一个电子邮件字段（主电子邮件）是必填项。填写后可以点击按钮 "Add email" 添加新的电子邮件地址。通过这种方式，可以添加另外 4 个电子邮件（总共 5 个电子邮件）。

系统检查电子邮件的格式是否正确，必要时显示消息并将数据注册到数据库中。

这是我的看法(manageContact.html)

  <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>

        </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>

为了查看联系人注册的所有电子邮件，每次注册电子邮件以查看数据时，我当前的脚本都需要单击按钮 "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){

        ...  
    });             


    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);
    }

    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) {
        ...     
    }).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() {
            });                     
        }
    };  

});

Answer 1

对不起，如果我误会了。
在这种情况下，您需要循环获取联系人的电子邮件信息。
例如，如果你得到下面的一种数据；你需要循环三次。

$scope.contact.ID = contact[0].ID;  
$scope.contact.EMAIL = contact[0].EMAIL;      // 'test1@mail.com'
$scope.contact.EMAIL_1 = contact[0].EMAIL_1;  // 'test2@mail.com'
$scope.contact.EMAIL_2 = contact[0].EMAIL_2;  // 'test3@mail.com'
$scope.contact.EMAIL_3 = contact[0].EMAIL_3;  // ''
$scope.contact.EMAIL_4 = contact[0].EMAIL_4;  // ''
// So 'emails' should be modified at this timing.
$scope.emails = [];
// Just for loop, so it doesn't matter what value you add.
$scope.emails.push($scope.contact.EMAIL);
$scope.emails.push($scope.contact.EMAIL_1);
$scope.emails.push($scope.contact.EMAIL_2);

之后，改变'Add email'条件。

ng-show="$index == emails.length - 1"

jsfiddle

添加多个电子邮件并显示定义的值

Add several emails and diplay defined values

forms

email

html-email

angularjs