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中使用它，并从第一个，第二个或第三个属性中订购数据。

我想按数据源索引排序，而不是按propertyName

排序

会是这样的：

<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，它将按颜色排序

你知道怎么做吗？

Answer 1

<强>的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 2

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

@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中做这种命令。

Answer 3

看一下片段，可以这样做。

＆＃13;

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"}];
  
});

＆＃13;

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

＆＃13;

ng-repeat数组顺序由数据源的属性索引

3 个答案: