Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

AngularJS1.5に再挑戦 その17 Order By & Images

概要

AngularJS1.5に再挑戦 その17 Order By & Images

参考動画・参考サイト

Coding for Entrepreneurs

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)
                })
            };
...
  • これは便利やな。