Блог

Главная - Вопросы по программированию - Как предотвратить добавление существующего электронного письма в строку таблицы в angularjs

Как предотвратить добавление существующего электронного письма в строку таблицы в angularjs

#javascript #html #angularjs-ng-repeat

#javascript #HTML #angularjs-ng-repeat

Вопрос:

Я хочу запретить добавлять адрес электронной почты, который уже существует.

Я хочу отключить добавление более 5 адресов электронной почты и имен.

Это controller.js: 

 var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.companies = [
                    { 'name':'Infosys Technologies',
                        'email': 'firstdawn1994@gmail.com',},
                        { 'name':'Cognizant Technologies',
                            'email': 'cognizant@gmail.com',},
                            { 'name':'Wipro',
                                'email': 'wipro@gmail.com',},
                                { 'name':'Tata Consultancy Services (TCS)',
                                    'email': 'tata@gmail.com',},
                                    { 'name':'HCL Technologies',
                                        'email': 'hcl@gmail.com',},
                    ];
$scope.addRow = function(){ 
    $scope.companies.push({ 'name':$scope.name, 'email': $scope.email });
    $scope.name='';
    $scope.email='';

};
$scope.removeRow = function(name){              
        var index = -1;     
        var comArr = eval( $scope.companies );
        for( var i = 0; i < comArr.length; i   ) {
            if( comArr[i].name === name ) {
                index = i;
                break;
            }
        }
        if( index === -1 ) {
            alert( "Something gone wrong" );
        }
        $scope.companies.splice( index, 1 );

    };
});

Это HTML:

 <html ng-app="helloApp">
<head>
<title>Hello AngularJS - Add Table Row Dynamically</title>
<link rel="stylesheet"
    href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script
    src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
    src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="js/controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">

    <input type="submit" value="Add New User  " class="btn btn-primary" id="add_user" />
    <form class="form-horizontal" role="form" ng-submit="addRow()" id="submit_form">
    <div class="form-group">
        <label class="col-md-2 control-label">Name</label>
        <div class="col-md-4">
            <input type="text" class="form-control" name="name"
                ng-model="name" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Email</label>
        <div class="col-md-4">
            <input type="text" class="form-control" name="email"
                ng-model="email" />
        </div>
    </div>
    <div class="form-group">                                
        <div style="padding-left:110px">
            <input type="submit" value="Submit" class="btn btn-primary"/>
        </div>
    </div>
</form>
    <table class="table">
    <tr>
        <th>Name
        </th>
        <th>Email
        </th>
    </tr>
    <tr ng-repeat="company in companies  | limitTo : 5">
        <td>{{company.name}}
        </td>
        <td>{{company.email}}
        </td>
        <td>
        <input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(company.name)"/>
        </td>
    </tr>
</table>
<script type="text/javascript">
  $(document).ready(function() {
    $('#submit_form').hide();
    $('#add_user').click(function(event) {
      $('#submit_form').toggle(1000);
    });
  });
</script>   
</body>
</html>

Ответ №1:

Для достижения этой цели, пожалуйста, измените вашу функцию addRow на этот код ниже

 $scope.addRow = function(){ 
  //store the new company in a variable for easy reference
  var newCompany = { 'name':$scope.name, 'email': $scope.email };
  //loops through existing companies to check if the email exists already
  var emailExists = $scope.companies.some(function(item){
         return item.email === newCompany.email;
  });

  //validation check before inserting the new company.
  if( $scope.companies.length < 5 amp;amp; !emailExists){
    $scope.companies.push(newCompany);
    $scope.name='';
    $scope.email='';
  }else{
    //display some validation messages
  }

};

Также в вашем HTML вы можете отключить кнопку Добавить, чтобы у пользователя не было возможности добавлять больше компаний, если у вас уже есть до 5 компаний, добавив атрибут под кнопкой в:

 data-ng-disable="companies.length > 5"

Следовательно, кнопка становится:

     <input type="submit" data-ng-disable="companies.length > 5" value="Submit" class="btn btn-primary"/>

Надеюсь, это поможет