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. jQuery size()函数

    size() 函数 函数用于返回当前jQuery对象封装的元素个数. 语法 jQueryObject.size( ) 返回值 Number类型 返回该jQuery对象封装的DOM元素的个数. 实例说明 ...

  2. python 安装MySQLdb mysql_config not fount

    缺少 libmysqlclient-dev 应该是安装MySQL的锅. 资料:http://www.cnblogs.com/xiazh/archive/2012/12/12/2814289.html ...

  3. iOS 开发之崩溃日志分析

    1. (js 与webview 交互崩溃)-[CFRunLoopTimer release]: message sent to deallocated instance 0x62398f80 I've ...

  4. 学习_单片机/嵌入式_的资源链接。——Arvin

    ---恢复内容开始--- +单片机 -郭天祥的51单片机入门视频(链接: https://pan.baidu.com/s/1sl3xNDr 密码: 1zik) -51单片机20元购买资料公开(链接: ...

  5. NotePad++常用快捷键。——Arvin

    Ctrl+单键 Ctrl+C 复制 Ctrl+X 剪切 Ctrl+V 粘贴 Ctrl+Z 撤消 Ctrl+Y 恢复 Ctrl+A 全选 Ctrl+F 键查找对话框启动 Ctrl+H 查找/替换对话框 ...

  6. Oracle分页查询=======之伪列的使用

    ========伪列========== 在Oracle数据库中,伪列不存在表中,但是可以从表中查询到 例如:SELECT ROWID 伪列,tname 教师姓名 FROM teacher; ==== ...

  7. centos 安装mongodb

    原文引用:http://blog.chinaunix.net/uid-24250828-id-3770298.html 官方网站: http://www.mongodb.org/ MongoDB 安裝 ...

  8. React初识（按钮点击+输入绑定）

    简单按钮点击事件: <!DOCTYPE html><html>  <head>  <meta charset="utf-8">    ...

  9. JavaScript判断、循环、Map、Set

     本文是笔者在看廖雪峰老师JavaScript教程时的个人总结      一些判断条件                 JavaScript把null.undefined.0.NaN和空字符串''视为 ...

  10. Unity3D 中的3种坐标系

    Unity3D Script API : Camera 若干文章: 1.Screen VS Viewport What is the difference 2.Screen,Viewport有什麽區別 ...