angularTest/test1.html at master · iwason/angularTest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script src="myscript.js"></script>
    <meta charset="UTF-8"/>
    <title>Angular Test</title>
    <style>
        .even {
            background-color: lightblue;
        }
        .odd {
            background-color: lightyellow;
        }
    </style>
</head>
<body>
<h1>Angular test </h1>
<hr/>
<div ng-controller="mainCtrl">
    <p>今日は　{{today|date:"yyyy年MM月dd日"}}</p>
</div>
検索ワード<input type="text" ng-model="query.name"/>

<div ng-controller="mainCtrl">
    <p>名前検索 {{query.name}}</p>
    <ul style="list-style: none">
        <li>ユーザ：{{users.length + usersNotYet.length }}名</li>
        <ul>
            <li>受験済：{{users.length}}名</li>
            <li>未受験：{{usersNotYet.length}}名</li>
        </ul>
    </ul>
    <ul>
        <li ng-repeat="member in users |orderBy:'score'|filter:query" ng-class-even="'even'" ng-class-odd="'odd'" ng-controller="userItemCtrl">
            {{$index + 1}} {{member.name|lowercase}}さんの点数は、{{member.score}}
            <button ng-click="increment()">+1</button>
        </li>
    </ul>
    <ul>
        <li ng-repeat="test in usersNotYet|orderBy:'-name'| filter:query">
            {{test.name}} {{$first}} {{$last}} {{name|lowercase}}さんは未受験です
        </li>
    </ul>
</div>
<hr/>
<div ng-controller="bto">
    <ul>
        <li ng-repeat="parts in pc">{{parts.part}}の値段は{{parts.value| currency:"\\" }}</li>
    </ul>
</div>
</body>
</html>