Material Design autocomplete make an item unselectable

问题

I'm using Material Design and AngularJS and I want to display some unselectable element in my autocomplete.

My autocomplete display entity that could be linked with the entity that the user is working on. Some of these entities are already linked to another entity. I want to display them but make them unselectable.

Here my autocomplete in a tpl.html file :

    <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>

My autocomplete is working and fetch me the entity I want.

I already tried to make the item unselectable with pointer-events: none; but it's still selectable.

How can I make the item unselectable ?

Any help will be appreciated, thanks in advance.

回答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>

And style wrapper to ignore hover

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

            }
        };
    });

and disable pointer events in .md-non-selectable

来源：https://stackoverflow.com/questions/36082182/material-design-autocomplete-make-an-item-unselectable

标签

angularjs

autocomplete

material-design