CODEWITHSUNDEEP
javascriptangularjscontroller
Fodrigoal
Fodrigoal

Reputation: 79

Setting default order by controller

can someone please help me with this - probably - very noob question, please?

I have the following html code:

<!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>

And I would like to set the default order of the cards shown by number. How can I do that modifying this controller?

// 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 }
    ];
}]);

Thanks in advance!

Upvotes: 1

Views: 145

Answers (3)

Julix
Julix

Reputation: 627

What you want to do is add this to your js.

$scope.orderProp = "numOrd";

Upvotes: 1

Luke Cupak
Luke Cupak

Reputation: 46

You can use function 'sort' in Array class. It will sort your cards array.

array.sort([compareFunction])

In this case:

$scope.cards.sort(function(a, b){
  return a['numOrd'] - b['numOrd'];
});

More about 'sort': https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Upvotes: 1

suvroc
suvroc

Reputation: 3062

The other method is to extend your model with another properties suitOrd which assign each of your suit one specific number. Thanks to this you can sort by this property because it will be a number

Upvotes: 1

Related Questions