AngularJS动态下拉框选项添加Glyphicon图标实现咨询

嘿，我明白你碰到的问题了——原生HTML的<select>标签里的<option>根本不支持嵌套HTML元素，浏览器会直接把你加的<span class="glyphicon">给忽略掉，所以你用ng-repeat的写法自然看不到图标。别发愁，给你两个靠谱的解决方案：

方案一：用AngularUI的ui-select组件（省心首选） #

这个组件专门封装了支持自定义HTML的下拉选择器，完美适配Bootstrap的Glyphicon图标，不用自己造轮子。

代码示例 #

HTML部分

<!-- 先确保引入了AngularJS、Bootstrap样式和ui-select的依赖 -->
<ui-select ng-model="passengerCountArray" on-select="reselectpassengerCount()">
  <!-- 选中项的显示模板 -->
  <ui-select-match placeholder="选择乘客数量">
    <span class="glyphicon glyphicon-envelope"></span> {{$select.selected.Name}}
  </ui-select-match>
  <!-- 下拉选项的模板 -->
  <ui-select-choices repeat="passenger in passangers track by passenger.Value">
    <span class="glyphicon glyphicon-envelope"></span> {{passenger.Name}}
  </ui-select-choices>
</ui-select>

JS部分（和你原有代码兼容）

app.controller('YourController', function($scope) {
  // 初始化乘客数据（和你原来的逻辑一致）
  $scope.passangers = [{ Name: "Passanger 1", Value: 1 }];
  var totalPassangers = 21;
  for (var i = 2; i <= totalPassangers; i++) {
    $scope.passangers.push({ "Name": "Passanger" + " " + i, "Value": i });
  }
  $scope.passengerCountArray = $scope.passangers[0];
  $scope.passengerCount = $scope.passangers[0].Value;

  // 选中后的回调逻辑
  $scope.reselectpassengerCount = function() {
    $scope.passengerCount = $scope.passengerCountArray.Value;
    // 这里可以加你原本的其他业务逻辑
  };
});

方案二：自定义模拟下拉框（无额外依赖） #

如果不想引入第三方组件，用Bootstrap样式+Angular指令就能自己实现一个支持图标的下拉框：

代码示例 #

HTML部分

<div class="dropdown" ng-click="toggleDropdown()">
  <!-- 模拟下拉按钮 -->
  <button class="btn btn-default dropdown-toggle" type="button">
    <span class="glyphicon glyphicon-envelope"></span> {{passengerCountArray.Name}}
    <span class="caret"></span>
  </button>
  <!-- 下拉选项列表 -->
  <ul class="dropdown-menu" ng-show="isDropdownOpen">
    <li ng-repeat="passenger in passangers" ng-click="selectPassenger(passenger)">
      <span class="glyphicon glyphicon-envelope"></span> {{passenger.Name}}
    </li>
  </ul>
</div>

JS部分

app.controller('YourController', function($scope) {
  // 初始化乘客数据（和你原有逻辑一致）
  $scope.passangers = [{ Name: "Passanger 1", Value: 1 }];
  var totalPassangers = 21;
  for (var i = 2; i <= totalPassangers; i++) {
    $scope.passangers.push({ "Name": "Passanger" + " " + i, "Value": i });
  }
  $scope.passengerCountArray = $scope.passangers[0];
  $scope.passengerCount = $scope.passangers[0].Value;

  // 下拉框状态控制
  $scope.isDropdownOpen = false;
  $scope.toggleDropdown = function() {
    $scope.isDropdownOpen = !$scope.isDropdownOpen;
  };

  // 选择乘客数量的逻辑
  $scope.selectPassenger = function(passenger) {
    $scope.passengerCountArray = passenger;
    $scope.passengerCount = passenger.Value;
    $scope.isDropdownOpen = false;
    $scope.reselectpassengerCount(); // 调用原有回调
  };

  $scope.reselectpassengerCount = function() {
    // 你的业务逻辑
    console.log("当前选中乘客数：" + $scope.passengerCount);
  };
});

可选优化CSS

.dropdown-menu li {
  cursor: pointer;
  padding: 3px 20px;
}
.dropdown-menu li:hover {
  background-color: #f5f5f5;
}

最后再啰嗦一句：你之前用ng-repeat写<option>里加span的方式行不通，是因为原生HTML的<option>只允许文本内容，任何嵌套的HTML都会被浏览器自动过滤掉，这是HTML的原生限制，和AngularJS无关哦～

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