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. 75篇关于Tomcat源码和机制的文章

    75篇关于Tomcat源码和机制的文章 标签: tomcat源码机制 2016-12-30 16:00 10083人阅读 评论(1) 收藏 举报  分类: tomcat内核(82)  版权声明:本文为 ...

  2. session、cookie

    session:全局变量组 存放位置:存放在服务器上 用法:相当于一个变量的使用方法,存在于服务器内存上,抓取速度快 主界面: using System; using System.Collectio ...

  3. (转)javascript 奇淫巧技44招

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...

  4. Michael Schatz - 序列比对课程

    Michael Schatz - Cold Spring Harbor Laboratory 最近在研究 BWA mem 序列比对算法,直接去看论文,看不懂,论文就3页,太精简了,好多背景知识都不了解 ...

  5. //解决validator验证插件多个name相同只验证第一的问题

    //解决validator验证插件多个name相同只验证第一的问题 var validatorName = function () { if ($.validator) { $.validator.p ...

  6. 设置DataSource后DateGridView不显示的问题

    在一个WinForm小程序中,有两处需要用DataGridView控件显示数据.设置DataGridView.DataSource为数据查询结果后,第一个DataGridView可以正常显示数据,而第 ...

  7. Tomcat APR & Linux Optimization

    一.简介 APR(Apache portable Run-time libraries)模式:简单理解,就是从操作系统级别解决异步IO问题,大幅度的提高服务器的处理和响应性能, 也是Tomcat运行高 ...

  8. ArcGIS创建tpk切片缓存

    一. 背景知识 1. tpk是什么? 从地图或底图生成切片,并将切片进行打包从而创建单个压缩的 .tpk 文件.切片包(.tpk)是在地图或栅格数据集中能作为 Web 切片或 Web 高程图层发布的一 ...

  9. 【WebGoat习题解析】Parameter Tampering->Bypass HTML Field Restrictions

    The form below uses HTML form field restrictions. In order to pass this lesson, submit the form with ...

  10. python——操作Redis

    在使用django的websocket的时候,发现web请求和其他当前的django进程的内存是不共享的,猜测django的机制可能是每来一个web请求,就开启一个进程去与web进行交互,一次来达到利 ...