Angularjs typeahead example is always not working
I am trying to use a case on angularjs typeahead now, but it is always not working, am I forget to import some js files? please help me out, thank you
Html:
<!doctype html>
<html ng-app="search">
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Search</title>
</head>
<body ng-controller="SearchController as search">
<h4>Static arrays</h4>{{search.states}}
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-change="onedit()" ng-model="selected" uib-typeahead="state for state in search.states | filter:$viewValue | limitTo:8">
JS:
(function () {
var app = angular.module('search', []);
app.controller('SearchController', ['$window', '$http', function ($window, $http){
var search = this;
search.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
Answer
//Define "ui.bootstrap" dependency here
var app = angular.module('search', ['ui.bootstrap']);
app.controller('SearchController', function ($scope){
$scope.selected="";
// Set your object
$scope.objects = [
{id:1, name : 'Dilip', type :{ title : 'a'}},
{id:2, name : 'Devendra', type :{ title : 'b'}},
{id:3, name : 'Jayesh', type :{ title : 'a'}},
{id:4, name : 'Jekin', type :{ title : 'c'}},
{id:5, name : 'Gaurang', type :{ title : 'a'}},
{id:6, name : 'Bhavin', type :{ title : 'e'}},
];
}); <!DOCTYPE html>
<html ng-app="search">
<head>
<meta charset="UTF-8">
<title>dynamic form</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="SearchController">
<!-- in uib-typeahead specify that property / attribute name which you want to display in drop down
in filter service specify an object with which you want to compare
for example if you want to compare this object by type then
filter : { type : $viewValue }
-->
<input type="text" ng-model="selected" uib-typeahead="object.name for object in objects | filter: {name:$viewValue} | limitTo:8">
</body>
</html>