読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

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

AngularJS1.5に再挑戦 その19 UI Bootstrap & Typeahead

概要

AngularJS1.5に再挑戦 その19 UI Bootstrap & Typeahead

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

UI Bootstrap & Typeahead

  • UI Bootstrapという、angularJS用のbootstrapがあるらしい!!これは便利!!

Angular directives for Bootstrap

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.4.0/ui-bootstrap-tpls.min.js'></script>
  • angularのmoduleにも追加しておく。app.module.jsに追記する。
'use strict';

angular.module('try', [
    // external
    'angularUtils.directives.dirPagination',
    'ngResource',
    'ngRoute',
    'ui.bootstrap',

    // internal
    'blogDetail',
    'blogList',
    'confirmClick',
    'tryNav'
]);
  • try-nav.module.js、try-nav.directives.jsにpost モジュールを追記する。
'use strict';

angular.module('tryNav', ['post']);
'use strict';

angular.module('tryNav').
    directive('tryNav', function(){
        return {
            restrict: "E",
            templateUrl: "/templates/try-nav.html",
            link: function(scope, element, attr){
            }
        }
    });
  • try-nav.directive.js に追記する。
'use strict';

angular.module('tryNav').
    directive('tryNav', function(Post, $location){
        return {
            restrict: "E",
            templateUrl: "/templates/try-nav.html",
            link: function(scope, element, attr){
                scope.items = Post.query()
                // scope.selectItem = function()
            }
        }
    });
  • try-nav.htmlに追記する。
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="Search"
            ng-model='searchQuery'
            uib-typeahead='post for post in items | filter:$viewValue | limitTo:8'
            typeahead-on-select=''
            />
            <!-- 初めのpostはobjectで、あとのpostは、valiable らしい -->
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a ng-href="/blog">Blog</a></li>
  • try-nav.directive.jsにselectItem functionを追記する。
                scope.selectItem = function($item, $model, $label){
                    console.log($item)
                    console.log($model)
                    console.log($label)
                }
  • try-nav.htmlに追記する。
uib-typeahead='post for post in items | filter:$viewValue | limitTo:8'
typeahead-on-select='selectItem($item, $model, $label)'
  • これでtypeaheadで、候補が表示されるようになった!(^ ^)/

  • さらにtry-nav.directive.jsにpathを追記すると、選択した時にリンクに飛ぶようになる。

                scope.selectItem = function($item, $model, $label){
                    console.log($item)
                    console.log($model)
                    console.log($label)
                    $location.path("/blog/" + $item.id)
                }
  • さらにsubmitボタン用にも追記する。
scope.searchItem = function(){
console.log(scope.searchQuery)
$location.path("/blog/").search("q", scope.searchQuery)