Attempting to input ordering criteria from a text box and dynamically order the content. The current code is functioning properly, but when attempting to change:
orderBy:'age'
to
orderBy:'{{criteria}}'
the functionality breaks. Here's the updated code snippet:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="testApp" ng-controller="testController">
<p>Insert desired ordering criteria into the input field:</p>
<p><input type="text" ng-model="criteria"></p>
<p>{{criteria}}</p>
<table class="friend">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:'age'">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('testApp',[]);
app.controller('testController', ['$scope', function($scope) {
$scope.friends =
[{name:'John', phone:'555-1212', age:10},
{name:'Mary', phone:'555-9876', age:19},
{name:'Mike', phone:'555-4321', age:21},
{name:'Adam', phone:'555-5678', age:35},
{name:'Julie', phone:'555-8765', age:29}];
}]);
</script>
</body>
</html>