データ数：{{users.length}}
データ数：{{users.length}}
<h1>並べ替え スコア 昇順</h1>
<div class="myng">
<div ng-controller="myController">
<p>データ数：{{users.length}}</p>
<ul>
<li ng-repeat="user in users|orderBy:'score'">
- {{user.name}} ({{user.score}})
</li>
</ul>
</div>
</div>
<h1>並べ替え アルファベット 降順</h1>
<div class="myng">
<div ng-controller="myController">
<p>データ数：{{users.length}}</p>
<ul>
<li ng-repeat="user in users|orderBy:'name'">
- {{user.name}} ({{user.score}})
</li>
</ul>
</div>
</div>
<h1>並べ替え 自由選択</h1>
<div class="myng">
<div ng-controller="myController">
<ul>
<li class="btn_s" ng-click="order='name'">英字順</li>
<li class="btn_s" ng-click="order='-name'">英字逆順</li>
<li class="btn_s" ng-click="order='score'">数値昇順</li>
<li class="btn_s" ng-click="order='-score'">数値降順</li>
</ul>
<ul>
<li ng-repeat="user in users|orderBy:order">
- {{user.name}} ({{user.score}})
</li>
</ul>
</div>
</div>
<h1>絞り込み 部分一致</h1>
<div class="myng">
<div ng-controller="myController">
<p><input type="text" ng-model="query.name"></p>
<ul>
<li ng-repeat="user in users|filter:query">
- {{user.name}} ({{user.score}})
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
// myAppモジュールを作成
var app = angular.module('myApp', []);
// myAppモジュールにmyControllerコントローラーを登録
app.controller('myController', function($scope) {
$scope.users = [
{"name":"aka","score":123},
{"name":"ao","score":345},
{"name":"kiiro","score":89},
{"name":"midori","score":74},
{"name":"murasaki","score":275},
{"name":"daidai","score":468},
{"name":"kuro","score":99},
{"name":"siro","score":20},
]
});
// ng-app を複数設定する必要があるが、
// jQueryが読み込まれている必要がある
angular.element(document).ready(function() {
angular.bootstrap($('.myng'), ['myApp']);
});
</script>