I used step 4 from the Angular tutorial to do some tinkering of my own. In that particular step of the tutorial, a option list is created that determines how a list is sorted (Alphabetically, by age). I tweaked the code to dynamically generate these sorting options from the data set.
Essentially, it takes the first element of the JSON data and creates a option for each of the keys:
<select ng-model="orderProp">
<option value="{{opt}}" ng-repeat="(opt,value) in phones[0]">{{opt}}</option>
</select>
Any remarks or suggestions?
This is the full index.html file. The example is reproducible by installing the Angular tutorial.
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="{{opt}}" ng-repeat="(opt,value) in phones[0]">{{opt}}</option>
</select>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<p> Now ordered by {{orderProp}} </p>
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the JSON data:
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.',
'age': 1},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.',
'age': 2},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.',
'age': 3}
];
(opt,value)insideng-repeat? – Dmitri Zaitsev Apr 19 at 7:41