当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How to prevent adding existing email to table row in angularjs

问题描述:

I want to prevent adding an email address which already exists.

I want to disable adding more than 5 email addresses and names.

This is controller.js:

var helloApp = angular.module("helloApp", []);

helloApp.controller("CompanyCtrl", function($scope) {

$scope.companies = [

{ 'name':'Infosys Technologies',

'email': '[email protected]',},

{ 'name':'Cognizant Technologies',

'email': '[email protected]',},

{ 'name':'Wipro',

'email': '[email protected]',},

{ 'name':'Tata Consultancy Services (TCS)',

'email': '[email protected]',},

{ 'name':'HCL Technologies',

'email': '[email protected]',},

];

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

};

});

This is the 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>

网友答案:

To achieve this please modify your addRow function to this code below

$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 && !emailExists){
    $scope.companies.push(newCompany);
    $scope.name='';
    $scope.email='';
  }else{
    //display some validation messages
  }

};

Also in your HTML, you can disable the Add button so that the user does not have the opportunity to add more Companies if you already have up to 5 companies by adding the attribute below the button to:

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

Hence, the button becomes:

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

Hope this helps

分享给朋友:
您可能感兴趣的文章:
随机阅读: