Would appreciate some assistance with what may appear to be a beginner's question, please?
This is the HTML code I'm working with:
<!doctype html>
<html>
<head>
<title>Starting Angular</title>
</head>
<!-- The ng-app directive triggers load and setup of AngularJS
after the DOM is loaded.
It sets the tag as the root of the AngularJS app. -->
<body ng-app="cardApp">
<!-- Identify the controller and model to be used. -->
<div ng-controller="MainController">
<!-- The ng-bind gets data from the model. -->
<h1 ng-bind="greeting"></h1>
<br />
Sort by:
<select ng-model="orderProp">
<option value="suit">Suit</option>
<option value="numOrd">Number</option>
</select>
<table>
<tr><th>Number</th><th>Suit</th></tr>
<!-- Populate the HTML with each object in the cards model. -->
<tr ng-repeat="card in cards | orderBy:orderProp ">
<td ng-bind ="card.number"></td>
<td ng-bind ="card.suit"></td>
</tr>
</table>
<br />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
I want to ensure that the default order of the cards displayed is organized by number. How can I achieve this by modifying the controller's code?
// Register controller with angular module.
var cardApp = angular.module('cardApp', []);
// The controller is a constructor function that takes a $scope parameter.
// The controller lets us establish data binding between the controller and the view.
// The model is initialized with the $scope parameter.
cardApp.controller('MainController', ['$scope', function ($scope) {$scope.val = "numOrd"
// Scope ensures that any changes to the
// model are reflected in the controller.
// Here we create an initialize a 'title' model.
$scope.greeting = "AngularJS Hello World!";
// Define cards model which stores an array of objects.
$scope.cards = [
{ "number": "2", "suit": "Hearts", "numOrd": 2 },
{ "number": "10", "suit": "Spades", "numOrd": 10 },
{ "number": "5", "suit": "Spades", "numOrd": 5 },
{ "number": "Q", "suit": "Hearts", "numOrd": 12 }
];
}]);
Thank you for your help!