Processing json data inside AngularJS ng-repeat

Question

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>

ukn · Accepted Answer · 2017-05-31 13:58:59Z

2

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>

answered May 31, 2017 at 13:58

ukn

1,8231 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anoop · Accepted Answer · 2017-05-31 13:59:18Z

2

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

answered May 31, 2017 at 13:59

anoop

3,8222 gold badges18 silver badges28 bronze badges

Comments

Michał Sałaciński · Accepted Answer · 2017-05-31 13:58:37Z

1

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>

answered May 31, 2017 at 13:58

Michał Sałaciński

2,2661 gold badge13 silver badges10 bronze badges

2 Comments

query Over a year ago

working! but can you explain little bit ? ng-if="$index" does it mean when index is not 0 ?and how the increment is working ?

Michał Sałaciński Over a year ago

Yup, $index here is like for standard array iteration: 0,1,2,3... so 1'st element to be printed is getting $index = 0 in its scope. As we don't want to print it, ng-if comes to help - it allows to print element only if a condition is TRUE, and in javascript, 0 equals FALSE. Next element to be created is getting $index = 1, so it'll pass ng-if condition etc.

gabriel · Accepted Answer · 2017-05-31 14:00:01Z

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>

Collectives™ on Stack Overflow

Processing json data inside AngularJS ng-repeat

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related