ng-repeat array order by the 属性索引数据源

Question

我有一个包含嵌套数组 DataRows 的数组源 ，没有像这样的属性名称：

 $scope.arraySource = [
                      ["21", "Leon", "Blue"],
                      ["15", "Marcel", "Red"],
                      ["14", "Jason", "Yellow"],
                      ["25", "Luc", "Green"],
                      ["74", "Cyrile", "Black"],
                      ["45", "John", "Grey"],
                      ["21", "Etiennes", "Green"],
                      ["58", "Mario", "Pink"],
                      ["56", "Sylvain", "Blue"],
                      ["87", "John", "White"]
];

我想在 ng-repeat 中使用它，并从第一个、第二个或第三个排序数据属性。

我想按数据源索引排序，而不是按属性名称

会是这样的：

<select ng-model="indexForSort"
        ng-select="idx for idx in [0,1,2]">
</select>   

 <table>
     <tr ng-repeat="row in arraySource   | 
                orderBy: indexForSort">
       <td>row[0]</td>
       <td>row[1]</td>
       <td>row[2]</td>
     </tr>
    </table>

如果用户 select 0 在下拉列表中，它将按年龄排序 table，如果他 select 1，它将按名称排序如果他select 2，它将按颜色排序

请问你知道怎么做吗？

Answer 1

看snippet，可以这样做。

var app = angular.module("myapp",[]);

app.controller('appCtrl',function($scope){
 
  $scope.arraySource = [{"age" :"21", "name" : "Leon", "color" : "Blue"},
                      {"age" :"15", "name" :"Marcel","color" : "Red"},
                      {"age" : "14", "name" :"Jason","color" : "Yellow"},
                       {"age" : "25","name" : "Luc", "color" :"Green"},
                      {"age" : "74","name" : "Cyrile", "color" :"Black"},
                      {"age" : "45", "name" :"John","color" : "Grey"},
                      {"age" : "21","name" : "Etiennes","color" : "Green"},
                      {"age" : "58","name" : "Mario","color" : "Pink"},
                      {"age" : "56","name" : "Sylvain","color" : "Blue"},
                      {"age" : "87", "name" :"John","color" : "White"}];
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp" ng-controller="appCtrl">
  
  <select ng-model="indexForSort"
        ng-options="idx for idx in ['age','name','color']">
</select>   

 <table>
     <tr ng-repeat="row in arraySource   | 
                orderBy: indexForSort">
       <td>{{row.age}}   </td>
       <td>{{row.name}}</td>
       <td>{{row.color}} </td>
           </tr>
    </table>

  
  
</div>

Answer 2

index.html:

<!DOCTYPE html>
<html ng-app="MyApp">

<head>
  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <select ng-model="indexForSort" ng-options="idx for idx in [0,1,2]">
  </select>

  <table>
    <tr ng-repeat="row in arraySource | orderBy: ''+indexForSort">
      <td>{{row[0]}}</td>
      <td>{{row[1]}}</td>
      <td>{{row[2]}}</td>
    </tr>
  </table>

</body>

</html>

app.js:

var app = angular.module('MyApp', []);

app.controller('MainCtrl', function($scope) {

  $scope.indexForSort = 0;

  $scope.arraySource = [
    ["21", "Leon", "Blue"],
    ["15", "Marcel", "Red"],
    ["14", "Jason", "Yellow"],
    ["25", "Luc", "Green"],
    ["74", "Cyrile", "Black"],
    ["45", "John", "Grey"],
    ["21", "Etiennes", "Green"],
    ["58", "Mario", "Pink"],
    ["56", "Sylvain", "Blue"],
    ["87", "John", "White"]
  ];
});

Answer 3

尝试以下几种替代方法来实现此目的。

@Andrew D.：感谢提示。

实际上，我们需要将indexForSort转换为字符串，也可以通过以下方式完成。

第一种方法：将数组索引定义为字符串，如下所示。

<select ng-model="indexForSort" ng-options="idx for idx in ['0','1','2']" ></select>

或

第二种方式：通过调用一个函数来执行orderBy。

<table>
     <tr ng-repeat="row in arraySource | orderBy: callSort(indexForSort)">
       <td>{{row[0]}}</td>
      <td>{{row[1]}}</td>
      <td>{{row[2]}}</td>
     </tr>
</table>
//Angular function that convert number to string
$scope.callSort=function(value)
{
  return value.toString();
}

希望这种替代方法可以帮助您将来在 ng-repeat 中执行这种 orderBy。

ng-repeat array order by the 属性索引数据源

ng-repeat array order by the property index of datasource

javascript

arrays

angularjs

angularjs-ng-repeat

ng-options

ng-repeat array order by the 属性 索引数据源

ng-repeat array order by the property index of datasource

javascript

arrays

angularjs

angularjs-ng-repeat

ng-options

ng-repeat array order by the 属性索引数据源