user2128 user2128 - 6 months ago 42
AngularJS Question

display error notification only when typeahead is not present

I am trying to display error notification when the name is not found. But currently the error is being shown even when the typeahead is giving hints.

What condition should i add in ng-show such that the notification is displayed only when the typeahead is out of the options.

The current code is:

div.form-inline
input.form-control(type="text", name="owner", ng-model="vm.selectedOwner", typeahead-on-select="vm.ownerChanged()", ng-class="{'input-error': vm.isError === 1,
'width-full' : vm.isShowOwnerBrowser === 1, 'width-50' : vm.isShowOwnerBrowser !== 1,
'width-full-icon-1' : vm.isOwnerDirty && vm.isShowOwnerBrowser === 1}", uib-typeahead="owner as owner.name for owner in vm.owners | filter:{name:$viewValue}", typeahead-template-url="customUserRoleTypeAheadTemplate.html", typeahead-select-on-exact="true", typeahead-show-hint="true", typeahead-min-length="0")
div.spacer-v-out-sm(ng-show="vm.isError === 1")
div.notification-inline
div.growl-container
div.growl-item.alert-error.icon
div.growl-message(translate)
| Specified user does not exist

Answer

The plain Angular / HTML answer is to add this to your input tag:

typeahead-no-results="vm.noResultsFound"

And then you can either do something simple like:

<span ng-if="vm.noResultsFound">Some message to display on no results</span>

Or watch it in your controller (I am assuming you have var vm = this based on the code I see):

$scope.$watch('vm.noResultsFound') ...

typeahead-no-results $ (Default: angular.noop) - Binding to a variable that indicates if no matching results were found.

Source: https://angular-ui.github.io/bootstrap/