angularjs typeahead는 ui-bootstrap에 포함되어 있습니다.
사용방법은 angularjs와 ui-bootstrap을 선언해주고
input text에 uib-typeahead 선언해주면 사용할수 있습니다.
module에서 ui-bootstrap 의 선언이 필요합니다.
제일 아래 jsbin에서 실제 코드를 테스트할수 있습니다.
다음 포스팅에서는 한글사용 문제와 해결방법에 대해서 포스팅 하도록 하겠습니다.
html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="angularjs-template">
<script src="http://static.jsbin.com/js/vendor/traceur.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div ng-app="app" ng-controller="appCtrl">
<input type="text"
ng-model="selected"
uib-typeahead="data as data.name for data in myData"
autocomplete="off"
/><br>
selected : {{selected}}
</div>
</body>
<head>
<meta name="description" content="angularjs-template">
<script src="http://static.jsbin.com/js/vendor/traceur.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div ng-app="app" ng-controller="appCtrl">
<input type="text"
ng-model="selected"
uib-typeahead="data as data.name for data in myData"
autocomplete="off"
/><br>
selected : {{selected}}
</div>
</body>
</html>
js
angular.module("app",['ui.bootstrap']).controller("appCtrl",function($scope){
$scope.selected = "";
$scope.myData = [
{name:'abcd1',code:'a'},
{name:'abcd2',code:'b'},
{name:'abcd3',code:'c'},
{name:'abcd4',code:'d'}
];
$scope.myData = [
{name:'abcd1',code:'a'},
{name:'abcd2',code:'b'},
{name:'abcd3',code:'c'},
{name:'abcd4',code:'d'}
];
});
jsbin >>>>>
'Programming > AngularJS' 카테고리의 다른 글
| [angularjs] two-way binding example (0) | 2016.06.12 |
|---|---|
| [angular-bootstrap] tooltip custom trigger (0) | 2016.06.01 |
| Yeoman를 이용한 gulp-angularjs 기본환경 셋팅 (0) | 2016.05.06 |
| [angularjs] focus 지정하기 (0) | 2016.03.11 |
| [angularjs] directive compile로 원하는 형태로 변경하기 (0) | 2016.02.25 |