How to select an array properly in angularjs

Question

I want to order a list of items by multiple properties. So I use an array that I bind in a variable.

Everything works fine until I let the user choose order options with a select. It breaks when my array has more than 1 value... and it seems to defaults to the track by $index order.

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

myApp.controller("myCtrl", function($scope){
    $scope.items = [
	{a: "3", b: "First"},
	{a: "2", b: "Second"},
	{a: "1", b: "Third"}
    ];
    $scope.my_orderby = ['a','b'];
    $scope.my_selected = {
	a: ['a'],
	b: ['b'],
	ab: ['a','b'],
	ba: ['b','a']
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    
<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="my_orderby.push(my_orderby.shift())">In place: {{my_orderby}}</button>
  <select ng-model="my_orderby">
    <option value="{{v}}" ng-repeat="(k,v) in my_selected">{{k}}</option>
  </select>
  <button ng-click="items.push(items.shift())">{{items}}</button>
  <hr/>
  <div ng-repeat="item in items | orderBy:my_orderby track by $index">{{item.a}} {{item.b}}</div>
</div>

How am I supposed to do to allow sorting by multiple properties?

Poney · Accepted Answer · 2017-12-19 05:37:20Z

1

It seems to be working with ng-options. I guess that "value" is converting the value to a string instead of keeping it as an array.

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

myApp.controller("myCtrl", function($scope){
    $scope.items = [
	{a: "3", b: "First"},
	{a: "2", b: "Second"},
	{a: "1", b: "Third"}
    ];
    $scope.my_orderby = ['a','b'];
    $scope.my_selected = {
	a: ['a'],
	b: ['b'],
	ab: ['a','b'],
	ba: ['b','a']
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    
<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="my_orderby.push(my_orderby.shift())">In place: {{my_orderby}}</button>
  <select ng-model="my_orderby" ng-options="item as index for (index, item) in my_selected">
  </select>
  <button ng-click="items.push(items.shift())">{{items}}</button>
  <hr/>
  <div ng-repeat="item in items | orderBy:my_orderby track by $index">{{item.a}} {{item.b}}</div>
</div>

answered Dec 19, 2017 at 5:37

Poney

5214 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RaphaMex Over a year ago

Upvoted. Not 100% working but you gave me the right lead for a solution. Thanks!

RaphaMex · Accepted Answer · 2017-12-19 16:48:33Z

1

@Poney gave me the right lead for an answer.

OPTION converts my array to CDATA object. Not sure what a CData array looks like, but avoiding it solved my issue.

https://www.w3.org/TR/html401/interact/forms.html#edef-OPTION.

To preserve my array, I had to combine ng-options with ng-change and do the change in a javascript function.

answered Dec 19, 2017 at 16:48

RaphaMex

2,8391 gold badge16 silver badges31 bronze badges

Comments

Nikita · Accepted Answer · 2017-12-19 06:15:18Z

0

Try this. Hope it will help you. Thank you.

<div ng-repeat="item in items | orderBy:'a'">{{item.a}} {{item.b}}</div>

answered Dec 19, 2017 at 6:15

Nikita

4372 silver badges12 bronze badges

1 Comment

RaphaMex Over a year ago

It does not help because I want it to work with an array... thanks anyway

Collectives™ on Stack Overflow

How to select an array properly in angularjs

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related