title: Duplicate row adding to my Emp table And Empty row also
body: <p>I am new to Angular applications.</p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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!=' '&amp;&amp; $scope.empsalary!=' '&amp;&amp; $scope.empid!=' '){
        $scope.emplist.push({'empname':$scope.empname,'empsalary':$scope.empsalary,'empid':$scope.empid});     
      }     
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
  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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;h1&gt;List Of Employee&lt;/h1&gt;
  &lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
   &lt;table style="width:100%;"&gt;
   &lt;thead&gt;
   &lt;tr height="35"&gt;
   &lt;th width="5%"&gt;S.No.&lt;/th&gt;
   &lt;th width="30%"&gt;EMP Name&lt;/th&gt;
   &lt;th width="33%"&gt;EMP ID&lt;/th&gt;
   &lt;th width="32%"&gt;EMP Salary&lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr ng-repeat ="x in emplist" height="25"&gt;
   &lt;td class="txt-center"&gt;{{$index+1}}&lt;/td&gt;
   &lt;td class="txt-center"&gt;{{x.empname}}&lt;/td&gt;
   &lt;td class="txt-center"&gt;{{x.empsalary}}&lt;/td&gt;
   &lt;td class="txt-center"&gt;{{x.empid}}&lt;/td&gt;
   &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;/table&gt;
   &lt;h1&gt;Add Employee&lt;/h1&gt;
   &lt;table style="width:100%"&gt;
   &lt;thead&gt;
   &lt;tr height="35"&gt;
   &lt;th width="5%"&gt;S.No.&lt;/th&gt;
   &lt;th width="30%"&gt;EMP Name&lt;/th&gt;
   &lt;th width="33%"&gt;EMP ID&lt;/th&gt;
   &lt;th width="32%"&gt;EMP Salary&lt;/th&gt;
   &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tr height="25"&gt;
   &lt;td&gt;&lt;button ng-click="addItem()" style="width:100%;"&gt;Add&lt;/button&gt;&lt;/td&gt;
   &lt;td&gt;&lt;input type="text" style="width:99%;" ng-model="empname"/&gt;&lt;/td&gt;
   &lt;td&gt;&lt;input type="text" style="width:99%;" ng-model="empsalary"/&gt;&lt;/td&gt;
   &lt;td&gt;&lt;input type="text" style="width:99%;" ng-model="empid"/&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>