ngOptions:向选择添加工具提示

时间:2013-10-30 10:25:30

标签: javascript angularjs angularjs-directive

使用以下json集合:

 $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个选项成功生成了一个选择。显示当前所选项目“描述”的工具提示的最佳角度方式是什么?也可以在用户浏览下拉菜单时进行此操作,即做出选择,实际上已经做出了选择吗?

2 个答案:

答案 0 :(得分:1)

您需要iddescription的地图。填充它的一种方法是:

$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;
        }
    }
});

在您的模板中,将其用作:

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

答案 1 :(得分:0)

如果您使用的是Twitter Bootstrap,您也可以考虑查看工具提示 UI Bootstrap如果您想要更高级的选择框,请考虑使用基于ui-select2Select2