ngOptions:在选择中添加工具提示 [英] ngOptions: add tooltip to selection

问题描述

使用以下json集合:

using the following json collection:

 $scope.searchscope = [

{ id: 0, name: "Base", description: "Search only the specified base object. The value is equal to 0." },
{ id: 1, name: "OneLevel", description: "Search the child objects of the base object, but not the base object itself.The value is equal to 1" },
{ id: 2, name: "Subtree", description: "Search the base object and all child objects. The value is equal to 2" }
];

和以下标记

 <select data-ng-model="mySelections[0].SearchFilterMembershipsScope" data-ng-options="i.id as i.name for i in searchscope" data-ng-required="true"></select>

我已成功生成带有3个选项的选择.显示当前所选项目说明"的工具提示的最佳角度方式是什么?在用户浏览下拉列表(即做出选择)时，是否有可能这样做?

I have successfully generated a select with the 3 options. What would be the best angular way to display a tooltip of the currently selected items "description"? Also would it be possible to do this whilst the user is navigating the dropdown, i.e. making a choice, verses actually had made the choice?

推荐答案

您需要来自id→的地图description.填充它的一种方法是:

You would need a map from id → description. One way to populate it would be:

$scope.idToDescription = null;

$scope.$watch("searchscope", function(newval) {
    if( newval != null ) {
        $scope.idToDescription = {};
        var i;
        for( i=0; i < newval.length; i++ ) {
            $scope.idToDescription[newval[i].id] = newval[i].description;
        }
    }
});

在您的模板中将其用作:

And in your template use it as:

<select ... 
    title="{{ idToDescription[mySelections[0].SearchFilterMembershipsScope] }}">

这篇关于ngOptions:在选择中添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！