Samudrala Ramu Samudrala Ramu - 2 months ago 5
CSS Question

Duplicate row Adding to my Emp table And Empty row also

I am new to angular applications please help me , when user enter details in text boxes and clicks on add button then in Emplist table that row added again click on that add button same row added how to fixed it give me a suggestion and one more is user not entered any details of Employee in that textbox then clicks on add button then its adding empty row how to fix this problem ,Sorry For My Bad English .



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

Reset all your fields after insert

Try the following:

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>