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

• angular-ui-bootstrapのCDNは以下のようなサイトからゲットしてくる。 https://cdnjs.com/libraries/angular-ui-bootstrap

• CDNをindex.htmlにセットする。

<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)