如何使用ng-option / ng-repeat在选择的选项上应用标题/工具提示/弹出框

Question

我想在选择标记的选项上动态应用弹出框，而不是在选择标记上，但是在选项上，这是我的代码

您可以进一步参考此代码，我需要在其中应用工具提示

<select class="form-control" ng-model="selectedCategory2" id="category" style="width:280px;" name="category" ng-change="onselectedchange2(selectedCategory2,DomainLoginId,selectedCategory3)" popover="{{allow}}" popover-trigger="mouseenter" popover-placement="right required>
    <option ng-repeat=" item in groupData" value="{{item.sso_access_type}}" title="{{allow}}">{{item.sso_access_type}}</option>
</select>

按照这段代码，我在Firefox中得到的输出是

<option ng-repeat=" item in groupData" value="S_Adv-Type6" title="Read-Only Access, S Budgets , S Billing" class="ng-binding ng-scope">S_Adv-Type6</option>

<option ng-repeat=" item in groupData" value="S_Adv-Type6" title="Read-Only Access, S Budgets , S Billing" class="ng-binding ng-scope">S_Adv-Type6</option>

您可以看到两个选项的标题都相同，但我希望它与控制器中的标题不同。

下面是我想要的图像链接 1 ：https：//i.stack.imgur.com/P32Zl.jpg

Answer 1

在groupData的每个项目中设置允许键

$scope.groupData = [
    {sso_access_type = 'one' , allow:'allowOne'},
    {sso_access_type = 'tow' , allow:'allowTow'}
];

并设置这样的选项

<option ng-repeat=" item in groupData" value="{{item.sso_access_type}}" title="{{item.allow}}">{{item.sso_access_type}}</option>