星期六加班,教育后台也要有星级评分等级的需求,醉了……基本知道些怎么做,网上也随便找了找,没什么合意的,毕竟需求不同,也不能完全一样不是。学习之,改之╮(╯▽╰)╭
Directive
<div class="jb51code">
<pre class="brush:js;">
angular.module('XXX').directive('stars',stars);
function stars() {
var directive = {
restrict: 'AE',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)">' +
'<i class="glyphicon glyphicon-star stars">' +
'' +
'',scope: {
ratingValue: '=',hoverValue: '=',max: '=',onHover: '=',onLeave: '='
},controller: startsController,link: function(scope,elem,attrs) {
elem.css("display","block");
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();
var updateStarsHover = function() {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled: i < scope.hoverValue
});
}
};
updateStarsHover();
scope.$watch('ratingValue',function(oldVal,newVal) {
if (newVal) {
updateStars();
}
});
scope.$watch('hoverValue',newVal) {
if (newVal) {
updateStarsHover();
}
});
}
};
return directive;
/** @ngInject */
function startsController($scope) {
// var vm = this;
$scope.click = function(val) {
$scope.ratingValue = val;
};
$scope.over = function(val) {
$scope.hoverValue = val;
};
$scope.leave = function() {
$scope.onLeave();
}
}
}