如何在 angular material 自动完成的末尾添加 link？

Question

我想在 angular material 自动完成的末尾添加一个 link。我需要 link 始终可见。我通过创建一个劫持 "md-not-found" 元素并始终显示它的指令找到了一种解决方法。这是它的外观示例：

https://plnkr.co/edit/5tfjYfrT59xx47k3Idke?p=preview

第一次聚焦时，它看起来与我想要实现的完全一样。 link "Create User" 出现在所有结果之后。然后在搜索之后，假设 "a"，自动完成结果框缩小到 1 个元素并且永远不会恢复到完整高度。

我该如何解决这个问题？或者有其他方法可以做我想做的事吗？

请记住，这只是一个例子，我并不是真的想那样即时创建用户。

非常感谢。

这是指令：

(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 '';
            }
        }
    }
})();

这是我的带有新指令的自动完成元素：

<md-autocomplete md-no-cache="true" 
                    not-found-always-visible
                    md-selected-item="ctrl.item" 
                    md-items="item in ctrl.querySearch(ctrl.searchText)" 
                    md-search-text="ctrl.searchText" 
                    md-item-text="item.Name" 
                    md-min-length="0" 
                    md-floating-label="Username" 
                    md-select-on-match="true"
                    md-match-case-insensitive="true">
      <md-item-template>
        <div>
          <span md-highlight-text="ctrl.searchText">{{ item.Name }}</span>
        </div>
      </md-item-template>
      <md-not-found>
        <a href="#">Create User {{ ctrl.searchText }}</a>
      </md-not-found>
    </md-autocomplete>

Answer 1

看看 this 是否有帮助。您可以在结果末尾添加 link 并为该 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">
        <md-item-template>
         <div ng-class="{fixed:item.isFooter}">
           <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
          </div>
        </md-item-template>
        <md-not-found>
          No states matching "{{ctrl.searchText}}" were found.
          <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
        </md-not-found>
      </md-autocomplete>

您可以像这样跟踪页脚，

function selectedItemChange(item) {
      if (item) {
        if (item.isFooter)
           $log.info('footer selected, creating a new'  + JSON.stringify(item));           
        else           
          $log.info('Item changed to ' + JSON.stringify(item));           
      }
    }

如何在 angular material 自动完成的末尾添加 link？

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

javascript

autocomplete

angularjs

angular-material