CODEWITHSUNDEEP
angularjsfiltercontroller
tidydee
tidydee

Reputation: 123

Filter in controller - Angular

I am having trouble with my controller. I am trying to set the default order on page load to display in sequence by number. Right now the the cards just load and one can select an order by. I need some help please.

Controller:

var cardApp = angular.module('cardApp', []);

cardApp.controller('MainController', ['$scope', function ($scope) {

   $scope.greeting = "AngularJS Hello World!";
   $scope.subTitle = "AngularJS Intro";

   function ctrl($scope, $filter) {
      $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 }
      ];
   }
}]);

View:

<!doctype html>
<html>
  <head>
    <title>Starting Angular</title>
  </head>

  <body ng-app="cardApp">

    <div ng-controller="MainController">

      <h1 ng-bind="greeting"></h1>
      <h3 ng-bind="subTitle"></h3>

      <span>Sort By:</span>
      <select ng-model="orderProp">
        <option value="suit">Suit</option>
        <option value="numOrd">Number</option>
      </select>
      <hr>

      <table>
        <tr>
          <th>Number</th>
          <th>Suit</th>
        </tr>

        <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="http://code.angularjs.org/1.3.3/angular.min.js"></script>
    <script src="js/controllers.js"></script>
  </body>
</html>

Upvotes: 0

Views: 65

Answers (1)

sagie
sagie

Reputation: 1777

define a value of orderProp as part of the scope creation just like you did for greeting and subTitle.

$scope.orderProp = 'numOrd';

Upvotes: 1

Related Questions