Created
February 20, 2013 01:41
-
-
Save vvakame/4991980 to your computer and use it in GitHub Desktop.
jquery.tokeninput.js http://loopj.com/jquery-tokeninput/ とangular.js を組み合わせて使うにはどうしたらいいのかな。と思って試作してみた。なんとなくangular.jsの流儀に反している気がする…。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>jquery.tokeninput.js with angular.js</title> | |
| <link rel="stylesheet" type="text/css" href="components/jquery-tokeninput/styles/token-input.css"/> | |
| <link rel="stylesheet" type="text/css" href="components/jquery-tokeninput/styles/token-input-facebook.css"/> | |
| <script type="text/javascript" src="components/jquery/jquery.js"></script> | |
| <script type="text/javascript" src="components/jquery-tokeninput/src/jquery.tokeninput.js"></script> | |
| <script type="text/javascript" src="components/angular/angular.js"></script> | |
| </head> | |
| <body> | |
| // 試す時の依存関係解決用スクリプト <br> | |
| // bower install https://github.com/loopj/jquery-tokeninput.git jquery angular <br> | |
| <hr> | |
| <div> | |
| Angular.js抜き<br> | |
| <input type="text" id="input1"> | |
| <script type="text/javascript"> | |
| var sugestList = [ | |
| { | |
| id: "a", | |
| name: "hoge" | |
| } | |
| ]; | |
| $("#input1").tokenInput(sugestList, { | |
| theme: "facebook", | |
| tokenLimit: 1, | |
| hintText: "検索語句を入力してください", | |
| noResultsText: "なんもない", | |
| searchingText: "けんさくちゅー" | |
| }); | |
| </script> | |
| </div> | |
| <hr> | |
| <div ng-app="myApp" ng-controller="TestController"> | |
| Angular.js入り<br> | |
| <div token-input ng-model="datas" input-suggest="suggestList"></div> | |
| <ul> | |
| <li ng-repeat="data in datas"> | |
| {{data.id}} - {{data.name}} | |
| </li> | |
| </ul> | |
| <button ng-click="add()">. 増やす</button> | |
| <script type="text/javascript"> | |
| window.TestController = function ($scope) { | |
| $scope.suggestList = [ | |
| { | |
| id: "a", | |
| name: "hoge" | |
| }, | |
| { | |
| id: "b", | |
| name: "fuga" | |
| } | |
| ]; | |
| $scope.id = 1; | |
| $scope.add = function () { | |
| $scope.suggestList.push({ | |
| id: $scope.id++, | |
| name: "" + Math.random() | |
| }); | |
| }; | |
| }; | |
| angular.module('myApp', ['myApp.directives']); | |
| angular.module('tokenInput.config', []).value('tokenInput.config', {}); | |
| angular.module('myApp.directives', ['tokenInput.config']) | |
| .directive('tokenInput', ['tokenInput.config', '$parse', function (config, $parse) { | |
| return { | |
| restrict: 'A', | |
| require: ['?ngModel'], | |
| replace: true, | |
| template: '<input type="text"/>', | |
| link: function (scope, element, attrs) { | |
| var options = { | |
| theme: "facebook", | |
| tokenLimit: 3, | |
| hintText: "検索語句を入力してください", | |
| noResultsText: "該当がありません", | |
| searchingText: "検索中です" | |
| }; | |
| if (config) { | |
| angular.extend(options, config); | |
| } | |
| var reflect = function (results) { | |
| if (attrs.ngModel) { | |
| scope.$apply(function () { | |
| scope[attrs.ngModel] = element.tokenInput("get"); | |
| }); | |
| } | |
| }; | |
| options.onAdd = reflect; | |
| options.onDelete = reflect; | |
| scope.$watch(attrs.inputSuggest, function (newVal) { | |
| var getter = $parse(attrs.inputSuggest); | |
| var suggestList = getter(scope); | |
| element.tokenInput(suggestList, options); | |
| }); | |
| } | |
| }; | |
| }]); | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thx a lot for your code,it helps me a lot.
but for some reason if
ng-modelrequired to be a object's prop just like "someObj.someVar", ex.<div token-input ng-model="product.category" input-suggest="suggestList"></div>the code would not be work,the directive can not change the scope's value.
I don't know the reason but i made a little change:
scope[attrs.ngModel] = element.tokenInput("get");to
$parse(attrs.ngModel).assign(scope, element.tokenInput("get"));thank u again and please tell me if i miss something about the Obj.Var style ng-model knowledge.