ui-bootstrap rating titles 属性 - 如何显示？

Question

uib-rating 有一个 titles 属性，其中为评级图标定义了字符串。有没有办法将这些标题用作字幕？我没有找到任何相关文件。

Answer 1

如果在这样的范围内定义 titles：

$scope.titles = ['a','b','c','d','e','f','g','h','i','j'];

然后在 HTML 中引用它：

<uib-rating ... titles="titles"></uib-rating>

您可以使用以下方式访问当前所选评分的标题：

$scope.titles[Number(currentRating) - 1];

我不得不 $watch rate 变量进行更改，以便我可以相应地更新标题：

$scope.$watch('rate', function(value) {
    $scope.caption = $scope.titles[Number(value) - 1];
});

我创建了一个 Plunker，在其中选择新评级后，下面的文本将显示相应的标题。

编辑：如何在悬停时显示标题：

您可以将访问标题的行添加到悬停功能：

$scope.hoveringOver = function(value) {
  $scope.overStar = value;
  $scope.percent = 100 * (value / $scope.max);
  $scope.caption = $scope.titles[Number(value) - 1];
};

并定义一个 on-leave 函数来重置标题：

$scope.hoveringOut = function() {    
  $scope.overStar = null;
  $scope.caption = null;
}

<uib-rating ... on-leave="hoveringOut()"></uib-rating>

请参阅 here 以获得演示。

ui-bootstrap rating titles 属性 - 如何显示？

ui-bootstrap rating titles attribute - how to show it?

angular-ui-bootstrap