I am new to Angular applications.

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.

```js
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});     
    }     
    }
});
```

```css
*{
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;
}
```

```html
<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>
```