重复行添加到我的Emp表和空行也

问题描述 投票：0回答：3

我是Angular应用程序的新手。

当用户在文本框中输入详细信息并单击添加按钮时，然后在Emplist表中再次添加该行，单击该添加按钮，同一行添加了如何修复它给我一个建议，还有一个用户没有在该文本框中输入任何Employee详细信息然后点击添加按钮然后添加空行。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
	$scope.emplist = [
	                  {empname:'samudrala',empsalary:'4.5 - pam',empid:'Emp - 450'},
	                  {empname:'soujanya',empsalary:'4.5 - pam',empid:'Emp - 451'},
	                  {empname:'suguna',empsalary:'4.5 - pam',empid:'Emp - 452'},
	                  {empname:'sangeetha',empsalary:'4.5 - pam',empid:'Emp - 453'},
	                  {empname:'sadhanandham',empsalary:'4.5 - pam',empid:'Emp - 454'},
	                  {empname:'jai',empsalary:'4.5 - pam',empid:'Emp - 455'},
	                  {empname:'vijay',empsalary:'4.5 - pam',empid:'Emp - 456'},
	                  {empname:'Ajay',empsalary:'4.5 - pam',empid:'Emp - 457'},
	                  {empname:'Sandya',empsalary:'4.5 - pam',empid:'Emp - 458'},
	                  {empname:'Raamu',empsalary:'4.5 - pam',empid:'Emp - 459'}
	                  ];
		  $scope.addItem = function(){
				if($scope.empname!=' '&& $scope.empsalary!=' '&& $scope.empid!=' '){
					 $scope.emplist.push({'empname':$scope.empname,'empsalary':$scope.empsalary,'empid':$scope.empid});					
				}			  
		  }
});
*{
margin:0px;
padding:0px;

}
.txt-center{
 text-align:center;
 }
html,body{
 	font-size: 14px;
 	font-family: Arial;
 	color:#333;
 	padding:0px;
 	margin:0px;
 	
}
table,tr,th,td{
border:1px solid;
border-collapse:collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h1>List Of Employee</h1>
<div ng-app="myApp" ng-controller="myCtrl">
 <table style="width:100%;">
 <thead>
 <tr height="35">
 <th width="5%">S.No.</th>
 <th width="30%">EMP Name</th>
 <th width="33%">EMP ID</th>
 <th width="32%">EMP Salary</th>
 </tr>
 <tr ng-repeat ="x in emplist" height="25">
 <td class="txt-center">{{$index+1}}</td>
 <td class="txt-center">{{x.empname}}</td>
 <td class="txt-center">{{x.empsalary}}</td>
 <td class="txt-center">{{x.empid}}</td>
 </tr>
 </thead>
 </table>
 <h1>Add Employee</h1>
 <table style="width:100%">
 <thead>
 <tr height="35">
 <th width="5%">S.No.</th>
 <th width="30%">EMP Name</th>
 <th width="33%">EMP ID</th>
 <th width="32%">EMP Salary</th>
 </tr>
 </thead>
 <tr height="25">
 <td><button ng-click="addItem()" style="width:100%;">Add</button></td>
 <td><input type="text" style="width:99%;" ng-model="empname"/></td>
 <td><input type="text" style="width:99%;" ng-model="empsalary"/></td>
 <td><input type="text" style="width:99%;" ng-model="empid"/></td>
 </tr>
 </table>
</div>
javascript jquery html css angularjs
3个回答
2
投票

插入后重置所有字段

请尝试以下方法：

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.emplist = [{
    empname: 'samudrala',
    empsalary: '4.5 - pam',
    empid: 'Emp - 450'
  }, {
    empname: 'soujanya',
    empsalary: '4.5 - pam',
    empid: 'Emp - 451'
  }, {
    empname: 'suguna',
    empsalary: '4.5 - pam',
    empid: 'Emp - 452'
  }, {
    empname: 'sangeetha',
    empsalary: '4.5 - pam',
    empid: 'Emp - 453'
  }, {
    empname: 'sadhanandham',
    empsalary: '4.5 - pam',
    empid: 'Emp - 454'
  }, {
    empname: 'jai',
    empsalary: '4.5 - pam',
    empid: 'Emp - 455'
  }, {
    empname: 'vijay',
    empsalary: '4.5 - pam',
    empid: 'Emp - 456'
  }, {
    empname: 'Ajay',
    empsalary: '4.5 - pam',
    empid: 'Emp - 457'
  }, {
    empname: 'Sandya',
    empsalary: '4.5 - pam',
    empid: 'Emp - 458'
  }, {
    empname: 'Raamu',
    empsalary: '4.5 - pam',
    empid: 'Emp - 459'
  }];
  $scope.addItem = function() {
    if (typeof($scope.empname) == "string" && typeof($scope.empsalary) == "string" && typeof($scope.empid) == "string") {
      $scope.emplist.push({
        'empname': $scope.empname,
        'empsalary': $scope.empsalary,
        'empid': $scope.empid
      });
      $scope.empname = $scope.empsalary = $scope.empid = null; //reset fields				
    }
  }
});
* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  font-size: 14px;
  font-family: Arial;
  color: #333;
  padding: 0px;
  margin: 0px;
}
table,
tr,
th,
td {
  border: 1px solid;
  border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h1>List Of Employee</h1>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:100%;">
    <thead>
      <tr height="35">
        <th width="5%">S.No.</th>
        <th width="30%">EMP Name</th>
        <th width="33%">EMP ID</th>
        <th width="32%">EMP Salary</th>
      </tr>
      <tr ng-repeat="x in emplist" height="25">
        <td class="txt-center">{{$index+1}}</td>
        <td class="txt-center">{{x.empname}}</td>
        <td class="txt-center">{{x.empsalary}}</td>
        <td class="txt-center">{{x.empid}}</td>
      </tr>
    </thead>
  </table>
  <h1>Add Employee</h1>
  <table style="width:100%">
    <thead>
      <tr height="35">
        <th width="5%">S.No.</th>
        <th width="30%">EMP Name</th>
        <th width="33%">EMP ID</th>
        <th width="32%">EMP Salary</th>
      </tr>
    </thead>
    <tr height="25">
      <td>
        <button ng-click="addItem()" style="width:100%;">Add</button>
      </td>
      <td>
        <input type="text" style="width:99%;" ng-model="empname" />
      </td>
      <td>
        <input type="text" style="width:99%;" ng-model="empsalary" />
      </td>
      <td>
        <input type="text" style="width:99%;" ng-model="empid" />
      </td>
    </tr>
  </table>
</div>
0
投票

你需要做的两件事：

  • 添加后清除\ temp对象
  • 使用ng-form验证空对象
0
投票

首先清除所有字段，然后输入值，它将添加到您的数组中。

使用这样：

   $scope.empname="";
   $scope.empsalary="";
   $scope.empid="";
   $scope.emplist = [
                  {empname:'samudrala',empsalary:'4.5 - pam',empid:'Emp - 450'},
                  {empname:'soujanya',empsalary:'4.5 - pam',empid:'Emp - 451'},
                  {empname:'suguna',empsalary:'4.5 - pam',empid:'Emp - 452'},
                  {empname:'sangeetha',empsalary:'4.5 - pam',empid:'Emp - 453'},
                  {empname:'sadhanandham',empsalary:'4.5 - pam',empid:'Emp - 454'},
                  {empname:'jai',empsalary:'4.5 - pam',empid:'Emp - 455'},
                  {empname:'vijay',empsalary:'4.5 - pam',empid:'Emp - 456'},
                  {empname:'Ajay',empsalary:'4.5 - pam',empid:'Emp - 457'},
                  {empname:'Sandya',empsalary:'4.5 - pam',empid:'Emp - 458'},
                  {empname:'Raamu',empsalary:'4.5 - pam',empid:'Emp - 459'}
                  ];
      $scope.addItem = function(){

            if($scope.empname!='' && $scope.empsalary!=''&& $scope.empid!=''){
                console.log('add'); $scope.emplist.push({'empname':$scope.empname,'empsalary':$scope.empsalary,'empid':$scope.empid


                                                        });
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.