Question

我想使用angularjs ng-repeat过滤表格数据。目前表中没有数据，但是，应显示一条消息，指出未找到数据。我得到的错误是：

*不允许在转发器中复制。使用＆＃39;跟踪＆＃39;表达式以指定唯一键。 Repeater：filter中的数据=（list | filter：search | orderBy：predicate：reverse）| startFrom：（currentPage-1） entryLimit | limitTo：entryLimit，Duplicate key：string :, Duplicate value：

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。

使用angularjs v1.3.15 ng-repeat

1 个答案: