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. html5 formData上传 针对app端

    function uploadFile() { if ((document.getElementById("file").files[0].size / 1024).toFixed ...

  2. angular 路由请求js文件

    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.3.2/an ...

  3. 【java基础】 合并两个类型相同的list

    将两个类型相同的list合并,可以用 addAll(Collection<? extends E> c) import java.util.ArrayList; import java.u ...

  4. Spring-cloud & Netflix 源码解析：Eureka 服务注册发现接口 ****

    http://www.idouba.net/spring-cloud-source-eureka-client-api/?utm_source=tuicool&utm_medium=refer ...

  5. Asp.Net_Mvc_获取当前Url、Controller、Action

    一.URL的获取很简单,ASP.NET通用: [1]获取 完整url (协议名+域名+虚拟目录名+文件名+参数) string url=Request.Url.ToString(); [2]获取 虚拟 ...

  6. stm32串口输出丢失第一个字符的问题及原因

    因为TC和TXE 标志位在复位的时候会被置1,导致第一次没有发送. 所以在初始化串口的时候可以增加一句 USARTx->SR=0;(如 USART1->SR=0;)

  7. SQL Server 2012 联机丛书安装

    已连接 Internet 的计算机: 单击"管理帮助设置"启动帮助库管理器. 在 Windows 7 中,依次选择"开始"."所有程序".& ...

  8. [官方软件] Easy Sysprep v4.3.29.602 【系统封装部署利器】（2016.01.22）--skyfree大神

    [官方软件] Easy Sysprep v4.3.29.602 [系统封装部署利器](2016.01.22) Skyfree 发表于 2016-1-22 13:55:55 https://www.it ...

  9. 搭建nginx+tomcat+Java的负载均衡环境

    转载  未测 供参考 另外这篇文章也不错.http://blog.csdn.net/wang379275614/article/details/47778201 一.简介: Tomcat在高并发环境下 ...

  10. linux哲学思想

    linux哲学思想 1.一切皆为文件 linux将所有的对象几乎都抽象为文件,无论是硬件设备.还是通讯接口都当做文件处理,这样可以设计统一的访问控制操作(read();write();delete() ...