angularJs 自定义指令实现星级评分功能
2016-05-24 13:01
295 查看
自定义指令directive,相关功能 代码如下:
样式css相关代码如下:
html相关代码如下:
测试链接网址:
http://jsfiddle.net/shengoo/m17tkmj3/?utm_source=website&utm_medium=embed&utm_campaign=m17tkmj3
<span style="font-size:18px;">var app = angular.module("app", []); app.controller('ctrl',function($scope){ $scope.max = 5; $scope.ratingVal = 2; $scope.readonly = false; $scope.onHover = function(val){ $scope.hoverVal = val; }; $scope.onLeave = function(){ $scope.hoverVal = null; } $scope.onChange = function(val){ $scope.ratingVal = val; } }); app.directive('star', function () { return { template: '<ul class="rating" ng-mouseleave="leave()">' + '<li ng-repeat="star in stars" ng-class="star" ng-click="click($index + 1)" ng-mouseover="over($index + 1)">' + '\u2605' + '</li>' + '</ul>', scope: { ratingValue: '=', max: '=', readonly: '@', onHover: '=', onLeave: '=' }, controller: function($scope){ $scope.ratingValue = $scope.ratingValue || 0; $scope.max = $scope.max || 5; $scope.click = function(val){ if ($scope.readonly && $scope.readonly === 'true') { return; } $scope.ratingValue = val; }; $scope.over = function(val){ $scope.onHover(val); }; $scope.leave = function(){ $scope.onLeave(); } }, link: function (scope, elem, attrs) { elem.css("text-align", "center"); var updateStars = function () { scope.stars = []; for (var i = 0; i < scope.max; i++) { scope.stars.push({ filled: i < scope.ratingValue }); } }; updateStars(); scope.$watch('ratingValue', function (oldVal, newVal) { if (oldVal) { updateStars(); } }); scope.$watch('max', function (oldVal, newVal) { if (newVal) { updateStars(); } }); } }; });</span>
样式css相关代码如下:
<span style="font-size:18px;">.rating { color: #a9a9a9; margin: 0; padding: 0; } ul.rating { display: inline-block; } .rating li { list-style-type: none; display: inline-block; padding: 1px; text-align: center; font-weight: bold; cursor: pointer; } .rating .filled { color: #ffee33; }</span>
html相关代码如下:
<span style="font-size:18px;"><div ng-app="app"> <div class="well" ng-controller="ctrl"> <div star rating-value="ratingVal" max="max" on-hover="onHover" on-leave="onLeave" readonly="{{readonly}}"></div> <div> Max: <input type="number" name="input" ng-model="max" min="0" max="99" required> <p>current value: {{ratingVal}}</p> <p>hover on : {{hoverVal?hoverVal:"none"}}</p> <p>readonly : <input type="checkbox" ng-model="readonly"></p> </div> </div> </div></span>
测试链接网址:
http://jsfiddle.net/shengoo/m17tkmj3/?utm_source=website&utm_medium=embed&utm_campaign=m17tkmj3
相关文章推荐
- angularJS 指令封装回到顶部
- angularJS 显示带html的文本
- AngularJs表单验证实例1
- angularJS如何让控制器与控制器进行通信,个人理解。
- AngularJs加载闪烁问题 ng-cloak
- Angular的问题【学习angular的,建议看看】
- Angular 怎么在加载中加入 Loading 提示框
- AngularJs(二)设计思想和常用功能
- angular run()运行块
- 表单验证<AngularJs> form valid
- angularjs 实现国际化
- 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
- AngularJs轮询器写法
- 走进AngularJs(七) 过滤器(filter) - 吕大豹
- AngularJS上拉加载问题解决方法
- angular - filter(自定义)
- AngularJS进阶(三十八)上拉加载问题解决方法
- AngularJS进阶(三十八)上拉加载问题解决方法
- angularjs事件指令--ngClick、ngDbclick、ngCut、ngChange、ngKeydown...
- AngularJS jqLite详情