Yveah Yveah - 1 year ago 110
AngularJS Question

How can I have a link at the end of an angular material autocomplete?

I am trying to have a link at the end of an angular material autocomplete. I need the link to always be visible. I found a workaround by creating a directive that kind of hijack the "md-not-found" element and always shows it. Here is an example of what it looks like :


On first focus, it looks exactly like what I'm trying to achieve. The link "Create User" appears after all the results. Then after a search, let's say "a", the autocomplete results box shrink down to 1 element and never get back to full height.

How can I fix this behaviour ? Or is there another way to do what I am trying to do ?

Please keep in mind that this is just an example, I am not really trying to create users on the fly like that.

Thank you very much.

Here is the directive:

(function () {
'use strict';

angular.module('app').directive('notFoundAlwaysVisible', notFoundAlwaysVisible)

notFoundAlwaysVisible.$inject = ['$rootScope'];

function notFoundAlwaysVisible($rootScope) {
return {
restrict: 'A',
require: '^mdAutocomplete',
replace: true,
template: '',
link: function (scope, element, attrs, parentCtrl) {
parentCtrl.notFoundVisible = function () { return true; }
return '';

Here is my autocomplete element with the new directive on it :

<md-autocomplete md-no-cache="true"
md-items="item in ctrl.querySearch(ctrl.searchText)"
<span md-highlight-text="ctrl.searchText">{{ item.Name }}</span>
<a href="#">Create User {{ ctrl.searchText }}</a>

Answer Source

See if this helps . You can add your link at the end of the results and have its own stylesheet for that link.

<md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in (ctrl.querySearch(ctrl.searchText).concat(ctrl.footerOption))" 
       md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?"  md-menu-class="autocomplete-custom-template">
         <div ng-class="{fixed:item.isFooter}">
           <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
          No states matching "{{ctrl.searchText}}" were found.
          <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>

You can track the footer like this,

function selectedItemChange(item) {
      if (item) {
        if (item.isFooter)
           $log.info('footer selected, creating a new'  + JSON.stringify(item));           
          $log.info('Item changed to ' + JSON.stringify(item));           
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download