从多选输入元素中删除项
从多选输入元素中删除项
提问于 2016-04-12 01:45:09
我希望在一个多选元素中加入删除功能，当你发布一个问题，然后为该问题选择多个标签时，它是如何在stackoverflow上完成的。一旦选择了一个项目，我想在它旁边添加关闭图标，以便用户可以单击“关闭/删除”图标，并从选择中一次删除一个项目。
我想知道是否有人可以指出一个教程，或者让我知道合并我上面提到的功能的步骤。我目前有以下代码，它基本上是一个输入元素和一个列表下拉列表，用户可以单击并选择一行，然后将name属性放入输入中，就像这里的标记功能一样。
我有点困惑，如何去添加“关闭”图标和背景，一旦作出选择？
<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 },
];Stack Overflow用户
发布于 2016-04-12 01:56:13
添加像这样的东西
<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>您还可以在项目本身上设置selected的属性，这样您就不必执行indexOf操作。
所以它将会是
<button ng-class="hidden:value.selected === false"></button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36555634
复制相关文章
相似问题
腾讯云开发者
