可搜索的多选下拉列表

时间:2020-09-03 07:11:03

标签: javascript angularjs

我正在尝试使用angular js实现可搜索的多选下拉列表。找到了类似的示例,该示例在Plunker上运行良好:http://plnkr.co/edit/O3T7MJuwSvcG04CRvVWB?preview 但是,当我在.html .js文件中的本地计算机上使用相同的代码时,它将显示{{commaDelimitedSelected()}}

<div class="dropdown searchable-multi-select" dropdown on-toggle="toggled(open)">
    <a class="dropdown-toggle btn btn-default" data-toggle="dropdown" dropdown-toggle data-target="#"
        tooltip="{{ commaDelimitedSelected() }}" ng-class="{'disabled': readOnly}">

        <span class="limit-ellipsis" ng-style="{ 'width' : width }">
            <small ng-class="{'text-muted': commaDelimitedSelected() === 'Nothing Selected'}">
                {{ commaDelimitedSelected() }}
            </small>
            <b class="caret" ng-if="!readOnly && allItems.length"></b>
        </span>
    </a>
    <ul ng-if="!readOnly && allItems.length" class="dropdown-menu dropdown-menu-form form-control" role="menu">
        <li><input type="text" class="form-control" ng-model="searchQuery" placeholder="Search"></li>
        <li ng-repeat="item in ::allItems track by $index"
            ng-hide="searchQuery.length && item[displayAttr].toLowerCase().indexOf(searchQuery.toLowerCase()) < 0">
            <label class="checkbox clickable" ng-click="updateSelectedItems(item)"
                ng-class="{'text-success': isItemSelected(item) }">

                {{ item[displayAttr] }}
                <span class="glyphicon glyphicon-remove pull-right clickable"
                    ng-show="isItemSelected(item)"></span>
            </label>
        </li>
    </ul>
</div>

enter image description here

我是angular js的新手,所以我们将不胜感激您的帮助

0 个答案:

没有答案