使用angularjs過濾表格數據v1.3.15 ng-repeat

Question

我想通過使用angularjs ng-repeat過濾表格數據。當前表中沒有數據，但是應該出現一條消息，指出找不到數據。我得到的錯誤是：

*重複在中繼器是不允許的。使用'track by'表達式來指定唯一鍵。 Repeater：過濾的數據=（list | filter：search | orderBy：predicate：reverse）| startFrom：（currentPage-1）entryLimit | limitTo：entryLimit，重複鍵：字符串：，重複的值：

---

HTML

<div ng-controller="SearchUsersCtrl"> 
    <div class="panel panel-default clients-panel col-md-10 col-md-offset-1"> 
    <div class="panel-body"> 

     <span class="col-md-3"> 
      <select ng-model="entryLimit" class="form-control input-sm search-limit"> 
       <option>5</option> 
       <option>10</option> 
       <option>20</option> 
       <option>50</option> 
       <option>100</option> 
      </select> 
     </span> 

     <span class="col-md-9"> 
      <input type="text" name="search" ng-model="search" ng-change="filter()" class="form-control search" placeholder="Search..."> 
     </span> 
    </div> 

    <div ng-repeat="filter:search"></div> 

    <table class="table" ng-show="filteredItems > 0"> 
     <thead> 
      <tr> 
       <th>#</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email</th> 
       <th>Action</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td> 
        <a href="" class="btn btn-success btn-sm"><i class="fa fa-file-o fa-fw"></i>&nbsp;Upload Excel</a> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

<div class="col-md-9 col-md-offset-1 text-center" ng-show="filteredItems == 0"> 
    <h4 style="color:red;">No Clients Found</h4> 
</div> 
<div class="col-md-9 col-md-offset-1 text-center" ng-show="filteredItems > 0">  
    <div pagination="" class="pagination-small" ng-model="currentPage" direction-links="true" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" maxSize="maxSize" previous-text="&laquo;" next-text="&raquo;"></div> 
</div> 

---

AngularJS

app.controller('SearchUsersCtrl', function($scope, $http, $timeout) { 

    $scope.loading = true; 

    $http({ 
     method: 'GET', 
     url: '' //retrieved from... 
    }).success(function(data){ 
     $scope.list = data; 
     $scope.currentPage = 1; //current page 
     $scope.entryLimit = 10; //max no of items to display in a page 
     $scope.filteredItems = $scope.list.length; //Initially for no filter 
     $scope.totalItems = $scope.list.length; 

     $scope.loading = false; 
    }); 

    $scope.setPage = function(pageNo) { 
     return $scope.currentPage = pageNo; 
    }; 

    $scope.filter = function() { 
     $timeout(function() { 
     $scope.filteredItems = $scope.filtered.length; 
     }, 10); 
    }; 

    // sort items in list 
    $scope.sort_by = function(predicate) { 
     $scope.predicate = predicate; 
     $scope.reverse = !$scope.reverse; 
    }; 

    $scope.maxSize = 5; //set number of pagination size 
}); 

Answer 1

我會聽的角度和使用track by避免重複鍵錯誤：

<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | 
    startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit track by $index"> 

注意track by $index將顯示所有重複，所以如果你想使用自己的跟蹤方法 - track by myTrackingFunction(n)

或者，如果你在你的數據對象的唯一標識，像

track by data.identifier

查看docs。