按数据源的属性索引的 ng-repeat 数组顺序答案

【问题标题】：ng-repeat array order by the property index of datasource按数据源的属性索引的 ng-repeat 数组顺序
【发布时间】：2017-01-16 08:50:41
【问题描述】：

我有一个包含嵌套数组 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>

如果用户在下拉列表中选择 0，它将按年龄对表格进行排序，如果他选择1，它将按名称排序如果他选择2，它将按颜色排序

请问你知道怎么做吗？

【问题讨论】：

标签： javascript angularjs arrays angularjs-ng-repeat ng-options

【解决方案1】：

尝试以下几种替代方法来实现这一目标。

@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。

【讨论】：

【解决方案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"]
  ];
});

【讨论】：

@VivienPipo 我认为是因为 orderBy: ''+indexForSort 而不是 orderBy: indexForSort 在您的代码中。
是的，我看到了，但我不明白它有什么变化
@VivienPipo 我不确定，但可能是这种从数字到字符串的更改类型？！不确定。

【解决方案3】：

看 sn-p ，可以这样。

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>

【讨论】：

没关系，我只是尝试给出一些基本的想法，您可以根据需要修改一些代码来实现它。