Angular UI Bootstrap Typeahead

Question

I am using Angular JS for the first time.

Here is my code and its not working. typeahead intellisense is showing as 'Unknown attribute'.

 <div class='container-fluid' ng-controller="HomeController">
    <h4>Search State</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" autocomplete="off" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>

function HomeController($scope, $http) {
$scope.selected = undefined;
$scope.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'];
}

Am I missing some JS files ?

What is your $viewValue variable set to? Is it present in your $scope? You should not use names starting with the $ symbol for variables as a best practice. — jpmorin
– jpmorin, Commented Sep 10, 2014 at 19:48
Can you show all your code with the application modules and html please. — jpmorin
– jpmorin, Commented Sep 10, 2014 at 20:04
@jpmorin I found that the same code working fine in Web forms but not in MVC. What would be the issue ? — user3757426
– user3757426, Commented Sep 11, 2014 at 13:31

sylwester · Accepted Answer · 2014-09-10 20:06:10Z

2

Please see working example here http://plnkr.co/edit/SjASFL8BkKdjLRxUlGVA?p=preview

make sure that you've got those scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

and you definition of your app include ui.bootstrap

var app= angular.module('app', ['ui.bootstrap']);

answered Sep 10, 2014 at 20:06

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user3757426 Over a year ago

I opened your link and its says example.js. What is that ? If I remove that example.js, it is not working.

user3757426 Over a year ago

I haven't understand that part. where to add var app= angular.module('app', ['ui.bootstrap']); ? what is the app code ?

user3757426 Over a year ago

Its not working for me. why typehead attribute is showing as unknown attribute in VS 2013 ?

sylwester Over a year ago

@user3757426 you can use data- ie: data-typeahead' please see here not best approach but everything on one page plnkr.co/edit/SjASFL8BkKdjLRxUlGVA?p=preview

jpmorin Over a year ago

Please read the angular documentation as stated by @sss to know how an angular project works. You must include the angular and ui-bootstrap scripts before your own modules to make it work.

|

Collectives™ on Stack Overflow

Angular UI Bootstrap Typeahead

1 Answer 1

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Related