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

Question

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

Solution

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.

Comments

[stampeder]

Ok I fixed my problem - the error was because I'm writing my page in perl and I needed to escape the $viewValue var. However I still don't really get why its $viewValue and not 'selected' in the filter - as in the ng-model directive? Is $viewModel being exported from the directive somehow?

[alfrescian]

selected is the value that is selected from the typeahead values. $viewValue is the current string of your input. $viewValue is part of ngModel: docs.angularjs.org/api/ng.directive:ngModel.NgModelControlle‌​r

[stampeder]

Ah, ok - thanks for that, and the quick reply. Also I'm using an array of objects - representing addresses rather than a simple array - and I want to populate another field with the postcode when I click on the full address in the typeahead. Is this possible? I'm looking at ng-change, but having no success- jsfiddle.net/UxTBB

[alfrescian]

just open a new question ... your jsfiddle is still the same as mine