2017-05-31 37 views
1

我想使用angularjs ng-repeat在表內顯示json數據,但由於我沒有訪問json數據的第一行,所以表的第一行仍爲空。我想省略表內的第一行json數據。如何實現這個?處理JSON數據內部angulrjs ng-repeat

我的JSON格式:

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> 
 
\t <th>Sr</th> 
 

 
<th>Employee ID</th> 
 
\t <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> 
 
\t <th>Sr</th> 
 

 
<th>Employee ID</th> 
 
\t <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>

回答

1

簡單的NG-如果,有沒有必要顯示$指數增加。

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> 
 
\t <th>Sr</th> 
 

 
<th>Employee ID</th> 
 
\t <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> 
 
\t <th>Sr</th> 
 

 
<th>Employee ID</th> 
 
\t <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>

+0

工作!但你能解釋一下嗎? ng-if =「$ index」是否意味着索引不是0?以及增量如何工作? – query

+0

是的,這裏的$ index類似於標準數組迭代:0,1,2,3 ...因此,要打印的第一個元素在其範圍內獲得$ index = 0。因爲我們不想打印它,所以ng-if來幫助 - 它只允許在條件爲TRUE時打印元素,並且在javascript中,0等於FALSE。下一個要創建的元素獲取$ index = 1,所以它會通過ng-if條件等。 –

2

嘗試使用NG-如果這樣

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

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

     </tr> 
2

更改密碼,如: <tr ng-repeat="data in list track by $index" ng-if="!$first">

1

如果你想省略第一行中的NG-重複,你可以用$ index跟蹤行的跳轉$ index = 0使用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> 
 
\t <th>Sr</th> 
 

 
<th>Employee ID</th> 
 
\t <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> 
 
\t <th>Sr</th> 
 

 
<th>Employee ID</th> 
 
\t <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>