AngularJS 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>practice angular</h1>
    <div ng-controller="MainController">
        <p>{{users.length}} users</p>
        <ul>
            <li ng-repeat="user in users">
                {{user.name}} {{user.score}}
            </li>
        </ul>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
angular.module('myapp', [])
    .controller('MainController', ['$scope', function($scope) {
        $scope.users = [
            {"name":"taguchi", "score":52.22},
            {"name":"tanaka", "score":38.22},
            {"name":"yamada", "score":11.11}
        ];
    }]);

numberは便利だ
todayは単純にjsのdateを渡すだけです

1
2
3
4
5
6
<li ng-repeat="user in users">
                {{user.name|uppercase}} {{user.score|number:4}}
            </li>
<p>{{600 * 240| number}}</p>
<p>{{today}}</p>
<p>{{today|date: 'yyyy-MM-dd'}}</p>

filter
filterはsqlから取得する場合はwhere-byで指定する箇所だけど、データバインディングで使うところって何だろう？　
あああああああああああああ、filter:queryは検索一覧ですげー使えるじゃん。。。さすがGoogle
あれ、でもこれ、keyとvalueでmysqlからjsファイルに吐き出さないとダメってこと？？まー試す価値はありそうね。

1
2
3
4
<li ng-repeat="user in users|limitTo:5">
<li ng-repeat="user in users|orderBy:'score'">
<li ng-repeat="user in users|orderBy:'-score'|limitTo:3">
<li ng-repeat="user in users|filter:query">

classのeven, oddも便利ですねー

1
2
3
{{$index}}{{user.name|uppercase}} {{user.score|number:4}}
{{$index+1}} {{$first}} {{$last}}{{user.name|uppercase}} {{user.score|number:4}}
<li ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'">