gpt4 book ai didi

javascript - 从多选输入元素中删除元素

转载 作者:行者123 更新时间:2023-11-28 06:09:21 25 4
gpt4 key购买 nike

我希望将删除功能合并到多选元素中,这与在 stackoverflow 上的操作完全相同,当您发布问题然后为问题选择多个标签时。选择一项后,我想在其旁边添加关闭图标,以便用户可以单击“关闭/删除”图标并一次从选​​择中删除一项。

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

我对选择完成后如何添加“关闭”图标和背景有点困惑?

   <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 },
];

最佳答案

添加类似

的内容
<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>

关于javascript - 从多选输入元素中删除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36555634/

25 4 0
文章推荐: javascript - 使用 dropzone 上传文件后显示成功消息
文章推荐: javascript - 如何将 kendo datePicker 的焦点更改为另一个按钮?我
文章推荐: javascript - 通过 Confluence HTML 传递标准报告的 API key
文章推荐: javascript - .css() 方法未被调用,因此
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com