angularJs 自定义指令实现星级评分功能
自定义指令directive,相关功能 代码如下:
<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