CODEWITHSUNDEEP
javascriptangularjsjson
query
query

Reputation: 529

Processing json data inside AngularJS ng-repeat

I want to show json data inside a table using AngularJS ng-repeat but my first row of the table remains empty as I am not accessing the first row of json data.I want to omit the first row of json data inside the table. How to achieve this?

My json format :

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('MyCtrl', function($scope) {
    $scope.list = [
    {"dept_id":"d10","dname":"dname"},

    {"eid":"10","ename":"nam1"},

    {"eid":"20","ename":"nam2"},

    {"eid":"30","ename":"nam3"},

    {"eid":"40","ename":"nam4"}
    ];


$scope.list1 = [

    {"eid":"10","ename":"nam1"},

    {"eid":"20","ename":"nam2"},

    {"eid":"30","ename":"nam3"},

    {"eid":"40","ename":"nam4"}
    ];
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  

</head>

<div class="container">

<div ng-app="myApp" ng-controller="MyCtrl">



<table class="table table-striped table-bordered">
    <thead>
      <tr>
	 <th>Sr</th>

<th>Employee ID</th>
	 <th>name</th>
 
    </tr>    
   </thead>
    <tbody>
  
   <tr ng-repeat="data in list">
      <td> {{$index+1 }} </td>
     
     <td> {{ data.eid }} </td>
      <td> {{ data.ename }} </td>
        
  </tr>
</tbody>
  
</table>

    But I want like this :


<table class="table table-striped table-bordered">
    <thead>
      <tr>
	 <th>Sr</th>

<th>Employee ID</th>
	 <th>name</th>
 
    </tr>    
   </thead>
    <tbody>
  
   <tr ng-repeat="data in list1">
      <td> {{$index+1 }} </td>
     
     <td> {{ data.eid }} </td>
      <td> {{ data.ename }} </td>
        
  </tr>
</tbody>
  
</table>
</div>


</div>

Upvotes: 1

Views: 83

Answers (4)

gabriel
gabriel

Reputation: 118

If you want to omit the first row in ng-repeat, you can track row's with $index on skip $index = 0 using ng-if

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('MyCtrl', function($scope) {
    $scope.list = [
    {"dept_id":"d10","dname":"dname"},

    {"eid":"10","ename":"nam1"},

    {"eid":"20","ename":"nam2"},

    {"eid":"30","ename":"nam3"},

    {"eid":"40","ename":"nam4"}
    ];


$scope.list1 = [

    {"eid":"10","ename":"nam1"},

    {"eid":"20","ename":"nam2"},

    {"eid":"30","ename":"nam3"},

    {"eid":"40","ename":"nam4"}
    ];
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  

</head>

<div class="container">

<div ng-app="myApp" ng-controller="MyCtrl">



<table class="table table-striped table-bordered">
    <thead>
      <tr>
	 <th>Sr</th>

<th>Employee ID</th>
	 <th>name</th>
 
    </tr>    
   </thead>
    <tbody>
  
   <tr ng-repeat="data in list track by $index" ng-if="$index > 0">
      <td> {{$index+1 }} </td>
     
     <td> {{ data.eid }} </td>
      <td> {{ data.ename }} </td>
        
  </tr>
</tbody>
  
</table>

    But I want like this :


<table class="table table-striped table-bordered">
    <thead>
      <tr>
	 <th>Sr</th>

<th>Employee ID</th>
	 <th>name</th>
 
    </tr>    
   </thead>
    <tbody>
  
   <tr ng-repeat="data in list1">
      <td> {{$index+1 }} </td>
     
     <td> {{ data.eid }} </td>
      <td> {{ data.ename }} </td>
        
  </tr>
</tbody>
  
</table>
</div>


</div>

Upvotes: 1

anoop
anoop

Reputation: 3822

Change code like : <tr ng-repeat="data in list track by $index" ng-if="!$first">

Upvotes: 2

ukn
ukn

Reputation: 1793

Try using ng-if like this 

 <tr ng-repeat="data in list1" ng-if="$index > 0">
          <td> {{$index+1 }} </td>

         <td> {{ data.eid }} </td>
          <td> {{ data.ename }} </td>

      </tr>

Upvotes: 2

Michał Sałaciński
Michał Sałaciński

Reputation: 2266

Simply ng-if and there's no need for increasing $index shown.

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('MyCtrl', function($scope) {
    $scope.list = [
    {"dept_id":"d10","dname":"dname"},

    {"eid":"10","ename":"nam1"},

    {"eid":"20","ename":"nam2"},

    {"eid":"30","ename":"nam3"},

    {"eid":"40","ename":"nam4"}
    ];


$scope.list1 = [

    {"eid":"10","ename":"nam1"},

    {"eid":"20","ename":"nam2"},

    {"eid":"30","ename":"nam3"},

    {"eid":"40","ename":"nam4"}
    ];
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  

</head>

<div class="container">

<div ng-app="myApp" ng-controller="MyCtrl">



<table class="table table-striped table-bordered">
    <thead>
      <tr>
	 <th>Sr</th>

<th>Employee ID</th>
	 <th>name</th>
 
    </tr>    
   </thead>
    <tbody>
  
   <tr ng-repeat="data in list" ng-if="$index">
      <td> {{$index }} </td>
     
     <td> {{ data.eid }} </td>
      <td> {{ data.ename }} </td>
        
  </tr>
</tbody>
  
</table>

    But I want like this :


<table class="table table-striped table-bordered">
    <thead>
      <tr>
	 <th>Sr</th>

<th>Employee ID</th>
	 <th>name</th>
 
    </tr>    
   </thead>
    <tbody>
  
   <tr ng-repeat="data in list1" ng-if="$index">
      <td> {{$index }} </td>
     
     <td> {{ data.eid }} </td>
      <td> {{ data.ename }} </td>
        
  </tr>
</tbody>
  
</table>
</div>


</div>

Upvotes: 1

Related Questions