Table Angular JS 和 MySql 在转发器中显示重复键

Question

我有一个加载了 Mysql 数据库字段的网格，还有一个过滤器和排序选项。问题是当我使用 Unique_ID 和 ref_ID 列以及 Mysql table 中的其他几列显示在网格中时，它会抛出以下附加错误。但如果只使用其中一个，它工作正常。

列 Unique_Id 包含唯一值，并且 ref_id 也包含重复值。如何在我的视图中包含这两个字段并解决错误？

这是我的视图:-

<table id="Mytable" class="table table-striped table-bordered">
            <thead>
            <th>Unique Id&nbsp;<a ng-click="sort_by('Unique_ID');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Status&nbsp;<a ng-click="sort_by('Status');"><i class="glyphicon glyphicon-sort"></i></a></th>
   <th>ID&nbsp;<a ng-click="sort_by('Ref_Id');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Prod number&nbsp;<a ng-click="sort_by('prod_num');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <!--<th>Publication Date&nbsp;<a ng-click="sort_by('Date_Publication');"><i class="glyphicon glyphicon-sort"></i></a></th>!-->
            <th>Balance&nbsp;<a ng-click="sort_by('Balance');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Color&nbsp;<a ng-click="sort_by('Color');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>function&nbsp;<a ng-click="sort_by('function');"><i class="glyphicon glyphicon-sort"></i></a></th>
   <th>value&nbsp;<a ng-click="sort_by('value');"><i class="glyphicon glyphicon-sort"></i></a></th>
            </thead>
   
            <tbody>
    
                <tr  ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                    
     <td><strong><a href="http://localhost:88/search/detail.php?id={{data.Unique_Id}}">{{data.Unique_Id}}</a></strong></td>
     <td>{{data.Status}}</td>
     <td>{{data.Ref_Id}}</td>
                    <td>{{data.Product_SN}}</td>
                    <!--<td>{{data.Date_Publication | date:'yyyy-MM-dd'}}</td>!-->
                    <td>{{data.Balance}}</td>
                    <td>{{data.Color}}</td>
                    <td>{{data.function}}</td>
     <td>{{data.value}}</td>
                </tr>
            </tbody>

JS

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

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
app.controller('cust', function ($scope, $http, $timeout) {
 $scope.showLoader = true;
    $http.get('ajax/getorders.php').success(function(data){
  $scope.showLoader = false;
        $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.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 0);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
 
 //DOMContentLoaded()
    
  

});

请帮忙

Answer 1

通过过滤器使用跟踪

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

Table Angular JS 和 MySql 在转发器中显示重复键

Table with Angular JS and MySql showing duplicate key in repeater

mysql

angularjs

angularjs-ng-repeat

angular