Question

我希望在多选元素中合并删除功能，完全是在这里完成的，在stackoverflow上，当您发布问题然后为问题选择多个标签时。选择项目后，我想在其旁边添加关闭图标，以便用户可以单击＆＃34;关闭/删除＆＃34;图标并一次从选择中删除该项目。

我想知道是否有人可以指出教程或让我知道合并上面提到的功能的步骤。我目前有以下代码，它基本上是一个输入元素和一个列表下拉列表，用户可以单击并选择一行，然后将name属性放入输入中，就像这里的标记功能一样。

我对如何添加＆＃34;关闭＆＃34;有点困惑。选择完成后的图标和背景？

   <input  type="text" class="form-control no-select" name="inputField" placeholder="{{ctrl.placeholder}}" 
    ng-model="ctrl.ngModelValue" ng-click="ctrl.openDropdown($event)"/>

   <table class="table">
        <thead>
            <tr>
                <th ng-repeat="heading in ctrl.gridColumnHeaders" class="text-center">{{heading}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in ctrl.filteredItems" ng-mousedown="ctrl.onSelectedLocal(row, $event)">
                <td ng-repeat="value in ctrl.sort(row) track by $index" class="text-center">
                    {{value}}
                </td>
            </tr>
        </tbody>
    </table>

单击输入切换打开的下拉列表，然后用户可以单击一行来选择它，一旦选择该行，它就会作为输入中ng-model中所选项目数组的一部分，但我想要添加关闭图标？我怎么能这样做？

由于

示例数据在ng-repeat内的表中循环：

  [
        { name: 'Jim', city: 'Minneapolis', state: 'MN', zip: 44332 },
        { name: 'Boe', city: 'Scottsdale', state: 'AZ', zip: 44332 },
        { name: 'Tom', city: 'S.F.', state: 'CA', zip: 11223 },
        { name: 'Joe', city: 'Dallas', state: 'TX', zip: 34543 },
        { name: 'Jon', city: 'L.A.', state: 'CA', zip: 56433 },
    ];

Answer 1

添加类似

的内容

<button ng-class="hidden:ctrl.selectedItems.indexOf(value) !== -1"></button>

应该做的伎俩

<table class="table">
    <thead>
        <tr>
            <th ng-repeat="heading in ctrl.gridColumnHeaders" class="text-center">{{heading}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in ctrl.filteredItems" ng-mousedown="ctrl.onSelectedLocal(row, $event)">
            <tr ng-repeat="value in ctrl.sort(row) track by $index" class="text-center">
                <td>{{value}}</td>
                <td><button ng-class="hidden:ctrl.selectedItems.indexOf(value) !== -1"></button</td>
            </tr>
        </tr>
    </tbody>
</table>

您还可以在项目本身上设置选定的属性，这样您就不必执行indexOf操作。

所以它会是

<button ng-class="hidden:value.selected === false"></button>

从多选输入元素中删除项目

1 个答案: