Rating是一个用于打分或排名的控件。看一个最简单的例子：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('RatingDemoCtrl', function ($scope) {

             $scope.rate = 7;

             $scope.max = 10;

             $scope.isReadonly = false;

             $scope.hoveringOver = function (value) {

                 $scope.overStar = value;

                 $scope.percent = 100 * (value / $scope.max);

             };

         });

     </script>

 </head>

 <body style="padding:10px">

     <div ng-controller="RatingDemoCtrl">

         <uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" ></uib-rating>

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

     </div>

 </body>

 </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的全局属性。如：

 angular.module('ui.bootstrap.demo', ['ui.bootstrap'])

     .config(['uibRatingConfig', function (uibRatingConfig) {

         uibRatingConfig.max = 3;

         uibRatingConfig.stateOn = 'glyphicon-ok-sign';

         uibRatingConfig.stateOff = 'glyphicon-ok-circle';

         }])

     .controller('RatingDemoCtrl', function ($scope) {

         $scope.rate = 2;

 });

默认的全局属性是：

{

  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

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating的更多相关文章

  1. Bootstrap组件福利篇：十二款好用的组件推荐

    阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增器组件 1.效果展示 2.源码说明 3.代码示例 三.加载效果 一.实用型 二.炫酷型 四.流程图小插件 1.效果展示 2.源 ...

  2. Bootstrap <基础十二>下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  3. 分享十二个有用的jQuery代码

    分享7个有用的jQuery代码 这篇文章主要介绍了7个有用的jQuery技巧分享,本文给出了在新窗口打开链接.设置等高的列.jQuery预加载图像.禁用鼠标右键.设定计时器等实用代码片段,需要的朋友可 ...

  4. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  5. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  6. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  7. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  8. 初探Bootstrap之十二栅格

    模型1: <!-- 4/12 --> <div class="container"> <div class="row"> & ...

  9. php分享十二：分组取前N记录

    经常看到问题,如何取出每组的前N条记录 http://blog.csdn.net/acmain_chm/article/details/4126306 问题:有表 如下,要求取出各班前两名(允许并列第 ...

  10. uni-app开发经验分享十二： Android平台应用启动时读写手机存储、访问设备信息(如IMEI)等权限策略及提示信息

    Android平台从6.0(API23)开始系统对权限的管理更加严格,所有涉及敏感权限都需要用户授权允许才能获取.因此一些应用基础业务逻辑需要的权限会在应用启动时申请,并引导用户允许. 读写手机存储权 ...

随机推荐

  1. 解决hibernate删除时的异常

    由于关联关系是一对多和多对一的关系,于是在代码中需要删除多的一方的对象时出现了 deleted object would be re-saved by cascade (remove deleted ...

  2. MAC usb启动盘制作

    1.从App Store 下载OS 2.磁盘工具格式化磁盘默认即可 3. 为啥截图,因为有些是不一样的,建议使用 Tab建,    未命名则是你移动U盘命名的名称. 4.完成:所有的命令完成的话, 终 ...

  3. linux 系统下 ngnix 显示目录形式

    vi  /usr/local/nginx/conf/nginx.conf   #编辑配置文件,在server {下面添加以下内容: location  / { autoindex on; autoin ...

  4. 在linux上部署web环境

    1.升级python到2.7版本(通过源码包重新安装一个2.7版本的python):wget https://www.python.org/ftp/python/2.7.9/Python-2.7.9. ...

  5. SSH框架总结

    首先,SSH是由多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框架的系统从职责 ...

  6. 【翻译】configuration changes与handler.post

    原文地址 http://corner.squareup.com/2013/12/android-main-thread-2.html 在前一部分里面previous part ,我们深入挖掘了 loo ...

  7. 关闭显示器API及命令

    window下命令powercfg /change "Home/Office Desk" /moniter-timeout-ac 1C#中实现[DllImportAttribute ...

  8. 未能加载文件或程序集“Newtonsoft.Json”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配

    引用第三方的 fineui 库依然使用旧版本导致.更换 fineui为新版,或找到源码更改引用 为新版,问题解决.

  9. mac pro常用操作

    1. spotlight: 右上角的放大镜图标,可以用来搜索程序和文档. 2.activity monitor: 打开spotlight搜索activity,可以看到运行的程序列表,类似windows ...

  10. <context:component-scan>使用说明

    Spring组件扫描<context:component-scan/>使用详解 在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫 ...