Question

我使用Material Design和AngularJS，我想在自动填充中显示一些不可选择的元素。

我的自动填充显示实体，可以与用户正在处理的实体链接。其中一些实体已经链接到另一个实体。我想展示它们但却让它们无法选择。

这是我在tpl.html文件中的自动填充功能：

    <md-autocomplete 
        md-no-cache="noCache"
        md-selected-item="selectedItem"
        md-search-text="searchText"
        md-selected-item-change= "controller.selectedItemChange(item)"
        md-items="item in controller.searchEntities(searchText)"
        md-item-text="item.display"
        md-min-length="3"
        placeholder="Enter Keyword"
        md-input-name="autocompleteEntities">
        <md-item-template>
            <span ng-show="!item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}}
            </span>
            <span class="linkedEntity" ng-show="item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}} <!-- Item I want to be unselectable -->
            </span>
        </md-item-template>
        <md-not-found>
            No Result For "{{searchText}}".
        </md-not-found>
    </md-autocomplete>

我的自动完成工作正在运行并获取我想要的实体。

我已尝试使pointer-events: none;无法选择该项目，但仍然可以选择。

如何让该项目无法选择？

任何帮助将不胜感激，提前谢谢。

Answer 1

<md-item-template>
     <span ng-click="$event.stopPropagation()">
            <span ng-show="!item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}}
            </span>
            <span class="linkedEntity" ng-show="item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}} <!-- Item I want to be unselectable -->
            </span>
    </span>
</md-item-template>

样式包装器忽略悬停

或

<md-item-template>
                <span md-selectable="your.expression"> </span>
</md-item-template>

angular.module('module').directive('mdSelectable', function($parse){
        return {
            restrict: 'A',
            link($scope, $elem, iAttrs){
                var liContainer = $elem.closest('li');
                if(!$parse(iAttrs.mdSelectable)($scope)){
                    liContainer.addClass('md-non-selectable');
                }

            }
        };
    });

并禁用.md-non-selectable中的指针事件

材料设计自动完成功能使项目无法选择

1 个答案: