How to remove default order of ng-repeat

我是研究僧i 提交于 2019-12-11 04:16:49

问题


How do I stop default sorting inside the ng-repeat for dynamic table data ? Currently I am getting below order:

Addr | CustomerId | Name

but what I want is below ordering:

CustomerId | Name | Addr

Any Help would me much appreciated.

JS:

app.controller('MyController', function ($scope) {
  $scope.Customers = [
    { CustomerId: 1, Name: "John Hammond", Addr:'India'
    },
    {
      CustomerId: 2, Name: "Mudassar Khan", Addr:'India'
    },
    {
      CustomerId: 3, Name: "Suzanne Mathews",  Addr:'India'
    },
    {
      CustomerId: 4, Name: "Robert Schidner",  Addr: 'India'
    }
  ];

});

HTML:

<table>
  <tr >
    <th ng-repeat="(key,value) in Customers[0]">{{key}}</th>
  </tr>
  <tbody ng-repeat="c in Customers">
    <tr>
    </tr>
  </tbody>
</table>

回答1:


Try this below way. I hope this below snippet result is showing what you want.

angular.module("aaa",[]).controller('MyController', function ($scope) {        
         $scope.Customers = [
            { CustomerId: 1, Name: "John Hammond", Addr:'India'          
            },
            {
                CustomerId: 2, Name: "Mudassar Khan", Addr:'India'                   
            },
            {
                CustomerId: 3, Name: "Suzanne Mathews",  Addr:'India'                  
            },
            {
                CustomerId: 4, Name: "Robert Schidner",  Addr: 'India'                   
            }
           ];       
           $scope.keys = Object.keys($scope.Customers[0]);

    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="aaa" ng-controller="MyController">
  <table>
           <tr>
                <th ng-repeat="key in keys"> 
    {{key}}
              </th>               
        </tr>
        <tbody ng-repeat="c in Customers">
            <tr>
              <td ng-repeat="key in keys">{{c[key]}}</td>                   
            </tr>
        </tbody>
    </table>
</div>



回答2:


So objects in JS are inherently unordered. What you can do is just hard code the keys in the header if that will be fixed for that particular table and then print the values in the respective order.

Something like this:

<table>
  <tr >
    <th>CustomerId</th>
    <th>Name</th>
    <th>Addr</th>
  </tr>
  <tbody>
    <tr ng-repeat="c in Customers">
       <td>{{CustomerId}}</td>
       <td>{{Name}}</td>
       <td>{{c.Addr}}</td>
    </tr>
  </tbody>
</table>

Note: I put the ng-repeat on the tr which is probably what you need. I dont think you should put it on the tbody.




回答3:


Do you mean the sort order of the data or the display order of the columns?

The accepted answer displays the data by the order of the columns as specified, but if you want the data itself sorted then just add a filter to the data like this:

<tbody ng-repeat="c in Customers|orderBy:['CustomerId','Name','Addr']">

This sorts the actual data in the list by the fields specified.



来源:https://stackoverflow.com/questions/48536162/how-to-remove-default-order-of-ng-repeat

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!