Filter in controller - Angular

Question

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>

Where and what is orderProp?

dursk
– dursk

2014-11-23 05:06:11 +00:00
Commented Nov 23, 2014 at 5:06 — dursk
– dursk, Commented Nov 23, 2014 at 5:06

sagie · Accepted Answer · 2014-11-23 05:12:11Z

1

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

$scope.orderProp = 'numOrd';

answered Nov 23, 2014 at 5:12

sagie

1,79714 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Filter in controller - Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related