CODEWITHSUNDEEP
angular-ui-bootstrap
francisaugusto
francisaugusto

Reputation: 1197

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

The uib-rating has a titles attribute, where strings are defined for the rating icons. Is there a way these titles can be used as captions? I didn't find any documentation on that.

Upvotes: 1

Views: 958

Answers (1)

Ian A
Ian A

Reputation: 6163

If you define the titles in the scope like this:

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

and then reference this in the HTML:

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

You can access the caption of the currently selected rating using:

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

I've had to $watch the rate variable for changes so I can update the caption accordingly:

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

I've created a Plunker where upon selecting a new rating, the text below will show the corresponding caption.

Edit: How to show caption upon hover:

You can add the line to access the caption to the hover function:

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

and define a on-leave function that resets the caption:

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

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

Please see here for a demo.

Upvotes: 2

Related Questions