Angular.jsの練習4(高度なフィルター) #JavaScript

ORDER BY, LIMIT, 入力項目での検索など

practice4.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8" />
  <title>AngularJS TIPS</title>
  <script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
  <script src="1_myscript.js"></script>
</head>
<body>
  <div ng-controller="myCtrl">
  <h3>LIMIT 4</h3>
  <ul>
    <li ng-repeat="user in users | limitTo:4">
      {{user.name | uppercase}}
      {{user.age}}
      {{user.money | number}}
      {{user.money | currency}}
      {{user.money | currency:"¥"}}
      {{ today | date:'yyyy-MM-dd'}}
    </li>
  </ul>
  <h3>ORDER By age ASC</h3>
  <ul>
    <li ng-repeat="user in users | orderBy:'age'">
      {{user.name | uppercase}}
      {{user.age}}
      {{user.money | number}}
      {{user.money | currency}}
      {{user.money | currency:"¥"}}
      {{ today | date:'yyyy-MM-dd'}}
    </li>
  </ul>
  <h3>ORDER By age DESC and LIMIT 3</h3>
  <ul>
    <li ng-repeat="user in users | orderBy:'-age' | limitTo:3">
      {{user.name | uppercase}}
      {{user.age}}
      {{user.money | number}}
      {{user.money | currency}}
      {{user.money | currency:"¥"}}
      {{ today | date:'yyyy-MM-dd'}}
    </li>
  </ul>
  <h3>Serach by Name</h3>
  <p><input type="text" ng-model="query.name">
  <ul>
    <li ng-repeat="user in users | filter:query">
      {{user.name | uppercase}}
      {{user.age}}
      {{user.money | number}}
      {{user.money | currency}}
      {{user.money | currency:"¥"}}
      {{ today | date:'yyyy-MM-dd'}}
    </li>
  </ul>
  <h3>Serach by Age</h3>
  <p><input type="text" ng-model="query2.age">
  <ul>
    <li ng-repeat="user in users | filter:query2">
      {{user.name | uppercase}}
      {{user.age}}
      {{user.money | number}}
      {{user.money | currency}}
      {{user.money | currency:"¥"}}
      {{ today | date:'yyyy-MM-dd'}}
    </li>
  </ul>
  </div>
  </div>
</body>
</html>

1_myscript.js

(function(){
  angular.module('myApp', []);
  angular.module('myApp')
    .controller('myCtrl', ['$scope', function($scope) {
        $scope.users = [
          {"name":"urano", "age":35, "money":50000},
          {"name":"nakanishi", "age":25, "money":1000000},
          {"name":"shinji", "age":45, "money":444000},
          {"name":"john", "age":49, "money":424000},
          {"name":"yna", "age":42, "money":934100},
          {"name":"miha", "age":25, "money":124000},
          {"name":"kazu", "age":43, "money":834000},
          {"name":"taka", "age":15, "money":799000}
        ];
        $scope.today = new Date();
    }]);
})();