AngularJS1.5に再挑戦 その17 Order By & Images
概要
AngularJS1.5に再挑戦 その17 Order By & Images
参考動画・参考サイト
AngularJS — Superheroic JavaScript MVW Framework
Order By & Images
- jsondataに、imageのURLを追記する。
[ {"title": "Ne Title", "id":1, "description": "This is a book", "publishDate": "2017-01-08", "comments":[ {"id":1, "text": "Nice book"}, {"id":2, "text":"Another comment"}, ], "image": "https://www.**********mini.jpg" }, {"title": "Title2", "id":2, "description": "This is a book", "image": "https://www.**********mini.jpg"}, {"title": "Some Title3", "id":3, "description": "This is a book", "image": "/img/mini.jpg"},
- config.ruを変更する。images->img。
use Rack::Static, :urls => ["/img", "/js", "/css", "/templates", "/json"],
- orderByをdirPaginationに加えることで、コンテンツの表示順を変更することができる。
<li dir-paginate='item in items | orderBy: "title" | filter: query | itemsPerPage: 5 as postItems' pagination-id="sub-content"> {{ item.title }} </li>
- コンボボックスなどで、選択した項目に応じてソート順を変えることも簡単にできる。
<select ng-model='order'> <option value='-publishDate'>Recent</option> <option value='publishDate'>Older</option> <option value='title'>A-Z</option> <option value='-title'>Z-A</option> </select> <li dir-paginate='item in items | orderBy: order | filter: query | itemsPerPage: 5 as postItems' pagination-id="sub-content"> {{ item.title }} </li>
- blog-list.components.jsに初期のorderの値を加えておく。
... angular.module('blogList'). component('blogList', { templateUrl: '/templates/blog-list.html', controller: function(Post, $location, $routeParams, $rootScope, $scope){ $scope.order = '-title' $scope.goToItem = function(post){ $rootScope.$apply(function(){ $location.path("/blog/" + post.id) }) }; ...
- これは便利やな。