Question

我想阻止添加已存在的电子邮件地址。

我想禁用添加超过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>

Answer 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 && !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"/>

希望这有帮助

如何防止将现有电子邮件添加到angularjs中的表行

1 个答案: