在控制器中过滤 - 角度

时间:2014-11-23 05:02:37

标签: angularjs filter 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 }
      ];
   }
}]);

查看:

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

1 个答案:

答案 0 :(得分:1)

定义orderProp的值作为范围创建的一部分,就像你为greeting和subTitle所做的那样。

$scope.orderProp = 'numOrd';