39

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

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
stampeder
  • 713
  • 2
  • 7
  • 6

1 Answers1

24

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.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
alfrescian
  • 4,079
  • 1
  • 18
  • 20
  • 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? – stampeder Jul 25 '13 at 10:02
  • 5
    selected is the value that is selected from the typeahead values. $viewValue is the current string of your input. $viewValue is part of ngModel: http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController – alfrescian Jul 25 '13 at 10:09
  • 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- http://jsfiddle.net/UxTBB/ – stampeder Jul 25 '13 at 10:17
  • just open a new question ... your jsfiddle is still the same as mine – alfrescian Jul 25 '13 at 10:26