Rating是一個用於打分或排名的控件。看一個最簡單的例子：
1 <!DOCTYPE html>
2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link href="/Content/bootstrap.css" rel="stylesheet" />
6 <title></title>
7
8 <script src="/Scripts/angular.js"></script>
9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10 <script>
11
12 angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('RatingDemoCtrl', function ($scope) { 13 $scope.rate = 7; 14 $scope.max = 10; 15 $scope.isReadonly = false; 16
17 $scope.hoveringOver = function (value) { 18 $scope.overStar = value; 19 $scope.percent = 100 * (value / $scope.max); 20 }; 21 }); 22 </script>
23
24 </head>
25 <body style="padding:10px">
26 <div ng-controller="RatingDemoCtrl">
27 <uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" ></uib-rating>
28 <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
29 </div>
30 </body>
31 </html>
效果是這樣：
uib-rating可以使用的屬性有：
| 屬性名 | 默認值 | 備注 |
| max | 5 | 圖標的最大個數 |
| ng-model | 當前圖標數量 | |
| on-hover(value) | 一個可選的表達式（函數），當鼠標放在圖標上時觸發 | |
| on-leave() | ||
| rating-states | null | 一個數組，定義所有圖標的屬性。默認的模板中，使用state-on和state-off定義圖標的類名 |
| read-only | false | 是否只讀 |
| titles | ['one', 'two', 'three', 'four', 'five'] | 一個字符串數組，定義所有圖標的標題（鼠標懸停在圖標上時會顯示標題） |
| enable-reset | true | 點擊當前分數的圖標會將分數重置為0 |
| state-off | null | 一個變量，表示未選中圖標的狀態 |
| state-on | null | 一個變量，表示選中了的圖標的狀態 |
這些屬性中，rating-states、state-on和state-off可以自定義圖標的類名
例如，使用rating-states為每個圖標分別設置選中和未選中的類名
$scope.ratingStates = [ { stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle' }, { stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' }, { stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle' }, { stateOn: 'glyphicon-heart' }, { stateOff: 'glyphicon-off' } ];
或者不使用rating-states，而使用state-on和state-off定義所有圖標的類：
<div ng-controller="RatingDemoCtrl">
<uib-rating ng-model="rate" max="max" on-hover="hoveringOver(value)" on-leave="overStar = null" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" >
</uib-rating>
</div>
用uibRatingConfig可以設置Rating的全局屬性。如：
1 angular.module('ui.bootstrap.demo', ['ui.bootstrap']) 2 .config(['uibRatingConfig', function (uibRatingConfig) { 3 uibRatingConfig.max = 3; 4 uibRatingConfig.stateOn = 'glyphicon-ok-sign'; 5 uibRatingConfig.stateOff = 'glyphicon-ok-circle'; 6 }]) 7 .controller('RatingDemoCtrl', function ($scope) { 8 $scope.rate = 2; 9 });
默認的全局屬性是：
{ max: 5, stateOn: null, stateOff: null, enableReset: true, titles : ['one', 'two', 'three', 'four', 'five'] }
目錄：
AngularJs的UI組件ui-Bootstrap分享（一）
AngularJs的UI組件ui-Bootstrap分享（二）——Collapse
AngularJs的UI組件ui-Bootstrap分享（三）——Accordion
AngularJs的UI組件ui-Bootstrap分享（四）——Datepicker Popup
AngularJs的UI組件ui-Bootstrap分享（五）——Pager和Pagination
AngularJs的UI組件ui-Bootstrap分享（六）——Tabs
AngularJs的UI組件ui-Bootstrap分享（七）——Buttons和Dropdown
AngularJs的UI組件ui-Bootstrap分享（八）——Tooltip和Popover
AngularJs的UI組件ui-Bootstrap分享（九）——Alert
AngularJs的UI組件ui-Bootstrap分享（十）——Model
AngularJs的UI組件ui-Bootstrap分享（十一）——Typeahead
AngularJs的UI組件ui-Bootstrap分享（十二）——Rating
AngularJs的UI組件ui-Bootstrap分享（十三）——Progressbar
AngularJs的UI組件ui-Bootstrap分享（十四）——Carousel