AngularJS中能否在dataList的option内添加删除按钮？

原生<datalist>的<option>仅支持纯文本内容，无法直接插入按钮这类交互元素。我们可以通过AngularJS的ng-repeat和自定义逻辑，模拟一个功能一致的下拉列表，同时为每个选项添加删除按钮。

实现代码 #

HTML 结构 #

<div ng-app="datalistApp" ng-controller="datalistCtrl">
  <!-- 输入框，绑定搜索关键词 -->
  <input type="text" 
         ng-model="searchTerm" 
         placeholder="输入关键词..."
         ng-click="showDropdown = !showDropdown"
         ng-blur="hideDropdown()">
  
  <!-- 自定义下拉列表容器 -->
  <div class="custom-datalist" ng-show="showDropdown && filteredItems.length > 0">
    <!-- 遍历过滤后的选项，每个选项带删除按钮 -->
    <div class="datalist-item" ng-repeat="item in filteredItems = (items | filter:searchTerm)">
      <span ng-click="selectItem(item)">{{item.name}}</span>
      <button class="delete-btn" ng-click="removeItem(item); $event.stopPropagation()">删除</button>
    </div>
  </div>
  
  <!-- 显示已选项目（可选） -->
  <p>已选：{{selectedItem ? selectedItem.name : '无'}}</p>
</div>

AngularJS 控制器 #

angular.module('datalistApp', [])
.controller('datalistCtrl', function($scope) {
  // 初始选项数据
  $scope.items = [
    {id: 1, name: "选项1"},
    {id: 2, name: "选项2"},
    {id: 3, name: "选项3"},
    {id: 4, name: "测试选项"}
  ];
  
  $scope.searchTerm = '';
  $scope.showDropdown = false;
  $scope.selectedItem = null;

  // 选择选项的逻辑
  $scope.selectItem = function(item) {
    $scope.selectedItem = item;
    $scope.searchTerm = item.name;
    $scope.showDropdown = false;
  };

  // 删除选项的逻辑
  $scope.removeItem = function(item) {
    var index = $scope.items.indexOf(item);
    if (index !== -1) {
      $scope.items.splice(index, 1);
      // 如果删除的是已选项目，清空选中状态
      if ($scope.selectedItem === item) {
        $scope.selectedItem = null;
        $scope.searchTerm = '';
      }
    }
  };

  // 失去焦点时隐藏下拉（延迟执行，避免点击按钮时直接隐藏）
  $scope.hideDropdown = function() {
    setTimeout(function() {
      $scope.$apply(function() {
        $scope.showDropdown = false;
      });
    }, 200);
  };
});

CSS 样式（模拟原生datalist外观） #

.custom-datalist {
  border: 1px solid #ccc;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.datalist-item {
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.datalist-item:hover {
  background-color: #f0f0f0;
}

.delete-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
}

.delete-btn:hover {
  background: #c82333;
}

关键说明 #

• 自定义下拉容器：用ng-show控制显示/隐藏，结合filter实现输入关键词的实时匹配，替代原生datalist的搜索功能。
• 删除按钮事件：使用$event.stopPropagation()防止点击删除按钮时触发选项的选择事件。
• 焦点处理：延迟隐藏下拉容器，确保点击删除按钮时不会因为输入框失焦而直接关闭下拉。

内容的提问来源于stack exchange，提问作者pablodmp1