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

Question

我是 Angular 应用程序的新手。

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

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>

Answer 1

插入后重置所有字段

尝试以下操作:

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>