<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h2>Basic Sort with more options iterating over Array</h2>
<div>
<h3>Order By:</h3>
<select data-ng-model='selectedSortOrder'
data-ng-options="option.value as option.name for option in [{'value':'+name','name':'Name: A-Z'},{'value':'-name','name':'Name: Z-A'}, {'value':'+lastName','name':'Last Name: A-Z'}, {'value':'-lastName','name':'Last Name: Z-A'}, {'value':'+age','name':'Age: Young to Experienced'}, {'value':'-age','name':'Age: Experienced to Young'}]"
data-ng-init="selectedSortOrder='+age'">
</select>
</div>
<div>
<h3>List of results:</h3>
<div ng-repeat="person in results | orderBy:selectedSortOrder">
{{person.name}} {{person.lastName}} - {{person.age}}
</div>
</div>
<!-- <h4>Debugging...</h4>
<div>
Selected Sort Order: <pre>{{selectedSortOrder3 | json}}</pre>
Results: <pre>{{results | json}}</pre>
</div> -->
</body>
</html>
var app = angular.module('myApp', []);
app.controller('myController', function($scope){
$scope.results = [
{
"name": "Santiago",
"lastName": "Doe",
"age": 32
},
{
"name": "Pablo",
"lastName": "Zeta",
"age": 28
},
{
"name": "Veronica",
"lastName": "Beta",
"age": 27
}
]
})
/* Styles go here */