liumang361

导航

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

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>
View Code

效果是这样：

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 });
View Code

默认的全局属性是：

{
  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

posted on 2016-07-31 18:01  pilixiami  阅读(3494)  评论(2)  编辑  收藏  举报