2

I have an array source with nested arrays DataRows with no property name like that:

 $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"]
];

I would like use it in a ng-repeat and to order that data from the first, the second or the third property.

I would like to order by index of datasource and not by propertyName

It would be something like that:

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

if the user select 0 in dropdown list, it will sort table by age, if he select 1, it will sort by Name if he select 2, it will sort by Color

Do you know how to do this please?

0

3 Answers 3

2

index.html:

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

<head>
  <script data-require="[email protected]" 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"]
  ];
});
3
  • @VivienPipo I think is it because orderBy: ''+indexForSort instead of orderBy: indexForSort in your code.
    – Andrew D.
    Sep 8, 2016 at 13:03
  • Yes I saw but I don't understand what does it change
    – Pipo
    Sep 8, 2016 at 13:04
  • @VivienPipo I am not sure, but may be this change type from number to string?! Not sure.
    – Andrew D.
    Sep 8, 2016 at 13:06
1

Try following few of the alternate ways to achieve this.

@Andrew D. : Thanks for the hint.

Actually, we need to convert indexForSort to string and that can be done by following ways also.

1st way: Define the array indexes as string as below, that will work.

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

OR

2nd way: Do the orderBy by calling a function.

<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();
}

Hope this alternate ways will helps you in the future to do this kind of orderBy in ng-repeat.

0

look at snippet , it can be done like this.

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>  

1
  • its ok , i am just try to give some basic idea , you can implement it by modifying some code as your need. Sep 8, 2016 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.