In the AngularJS BootstrapUI Typeahead, what's $viewValue?

stampeder picture stampeder · Jul 24, 2013 · Viewed 25.7k times · Source

I'm trying to implement a typeahead in Angular using http://angular-ui.github.io/bootstrap/

Seems like it should be easy, but I'm getting the following error:

Global symbol $viewValue requires explicit package name.

What is $viewValue? It doesn't seem to be defined.

Thanks

Answer

alfrescian picture alfrescian · Jul 24, 2013

here is a working typeahead example:

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid">
                <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" />
            </div>
        </form>
    </div>
</div>

<script>
angular.module('myApp', ['ui.bootstrap'])
.controller("mainCtrl", function ($scope) {
   $scope.selected = '';
   $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'];
});
</script>

http://jsfiddle.net/alfrescian/ZjPWe/

$viewValue is the current value in the view - your string input. $viewValue is specified in ngModel.