javascript - AngularJS 动态下拉选项上的 glyphicon

Question

我正在创建一个网络应用程序，其中有一个如下所示的下拉列表

<select id="passengerCountDropDown" ng-change="reselectpassengerCount()" ng-options="passanger.Name for passanger in passangers" ng-model="passengerCountArray"></select>

这就是我填充数据的方式

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;

现在的问题是，我想在下拉列表中的选项上添加字形，但我无法做到这一点，

我还尝试了另一个例子Here

但没有成功

    <select ng-model="passengerCountArray">
        <option ng-repeat="c in passangers" value="{{ $index }}">
            <span class="glyphicon glyphicon-envelope"></span>
            {{ c.Name }}
        </option>
    </select>

这是我的 JSfiddle Click here

我怎样才能实现这个目标？

Answer 1

我认为这可以是你的答案:

http://thewebfosters.com/add-icons-html-select-options/

或者您可以自己模拟选择标签，就像他们在 Angular Material 中所做的那样。