更改后angularjs自定义星级评分
2016-08-08 14:26
274 查看
自定义控制器directive代码如下:
样式css代码如下:
注:其中url里面是要引用的显示图片。
我的界面要求是这样的,引用是的html代码如下截图所示:
齐代码如下:
具体的controller部分的代码如下:
$scope.ctrlData = {
starDone: false
};
$scope.initStarInfo = function () {
$scope.starInfo = {
item: function (name) {
if (name == 'logisticsStar') {
return {
callBack: function (vel) {
$rootScope.logistStar = vel;
console.log("$rootScope.logistStar:::" + $rootScope.logistStar);
}
};
} else if (name == 'serviceStar') {
return {
callBack: function (vel) {
$rootScope.serviceStar = vel;
console.log("$rootScope.serviceStar:::" + $rootScope.serviceStar);
}
};
} else {
return {
callBack: function (vel) {
console.log("name:::::"+name);
console.log("vel:::::"+vel);
for(var i = 0; i < $scope.goodIdList.length; i++){
if($scope.goodIdList[i] == name){
if($scope.productStarArray.length == 0){
$scope.product.name = name;
$scope.product.productStar = vel;
$rootScope.productStarArray.push( $scope.product);
}else if($scope.productStarArray.length >= $scope.goodIdList.length){
for(var f = 0; f < $scope.productStarArray.length; f++) {
if ($scope.productStarArray[f].name == name) {
$scope.productStarArray[f].name = name;
$scope.productStarArray[f].productStar = vel;
}
}
}else{
for(var j = 0; j < $rootScope.productStarArray.length; j++){
if( $rootScope.productStarArray[j].name == name){
$rootScope.productStarArray[j].name = name;
$rootScope.productStarArray[j].productStar = vel;
}else{
var object = {};
object.name = name;
object.productStar = vel;
var array = [];
array.push(object);
console.log("array:::"+angular.toJson(array));
$rootScope.productStarArray = $rootScope.productStarArray.concat(array)
}
}
}
}
}
}
};
}
}
};
$scope.ctrlData.starDone = true;
};
$scope.initStarInfo();
以上只是个人做的时候用的,命名也是自己项目中用的,如有错的地方请见谅!
app.directive('hgStarBox', function () { return { restrict:'ECAM', template: '<div class="hg-score"><div class="hg-star-des" ng-transclude></div><span class="{{star.css}}" ng-repeat="star in stars" style="{{config}}" ng-click="clickStar({{$index}})" ></span></div>', scope:{ startInfo:'=hgStarInfo' }, replace:false, transclude:true, link: function (scope, elem, attrs) { var itemName = attrs['name']; if(itemName == undefined){ alert('必须添加name属性'); throw new Error("必须添加name属性"); } this.styleFactory = { new:function(){ return ''; }, addStyleItem:function(style,/*内部不能用",请用'代替*/styleTtem){ return style+styleTtem; } } this.dataFactory = { default:{ max:5, current:0, callBack:null, config:{ wh:'1em' } }, dataWithName:function(name){ var data = dataFactory.default; var dataNew = scope.startInfo.item(name); if(dataNew.hasOwnProperty('max')){ data.max = dataNew.max; } if(dataNew.hasOwnProperty('current')){ data.current = dataNew.current; } if(dataNew.hasOwnProperty('callBack')){ data.callBack = dataNew.callBack; } if(dataNew.hasOwnProperty('config')){ if(dataNew.config.hasOwnProperty('wh')){ data.config.wh = dataNew.config.wh; } } return data; } }; scope.data = dataFactory.dataWithName(itemName); var style = this.styleFactory.new(); style = this.styleFactory.addStyleItem(style,'width:'+ scope.data.config.wh+';'); style = this.styleFactory.addStyleItem(style,'height:'+ scope.data.config.wh+';'); scope.config = style; this.showStar = function (who){ who.stars = []; for (var i = 0; i < who.data.max; i++) { who.stars.push({ css:(i < who.data.current?'hg-star':'hg-star-null') }); } }; scope.clickStar = function(index) { if(scope.data.callBack == null)return; scope.data.current = index+1; showStar(scope); scope.data.callBack(scope.data.current); } showStar(scope); } }; });
样式css代码如下:
/* *hg-star-box 指令样式 */ .hg-score { display: inline-block; } .hg-score .hg-star { display: inline-block; width: 1em; height: 1em; background: url(../img/comm/star_full.png) no-repeat; background-size: contain; margin:4px 4px 0 0; float: left; } .hg-score .hg-star-null { display: inline-block; width: 1em; height: 1em; background: url(../img/comm/star_null.png) no-repeat; background-size: contain; margin: 4px 4px 0 0; float: left; } .hg-score .hg-star-des { display: inline-block; float: left; }
注:其中url里面是要引用的显示图片。
我的界面要求是这样的,引用是的html代码如下截图所示:
齐代码如下:
<ion-list> <ion-item ng-repeat="cart in cart"> <div class="row"> <img class="col-20 hg-img-background" src="{{cart.goodsDirVO.cover}}"/> <textarea name="evaluation" id="evaluation({{cart.goodsDirVO.id}})" class="col hg-magin-left-5" ng-required="true" type="text" placeholder="评价~~~"></textarea> </div> <div class="row"> <div class="hg-img-parent"> <img class="hg-img-2em" src="img/information/camera.png" ng-click="chooseWayUp($index)"/> </div> <div class="hg-img-parent"> <button class="button-clear hg-text-vertical" ng-hide="isShow" ng-click="chooseWayUp($index)">上传照片</button> </div> <div ng-hide="!isShow" ng-repeat="img in imgList[$index]" class="row"> <img class="hg-img-5em" src="{{img}}"/> <img class="hg-right" src="img/information/close2.png" ng-click="removePicture(img)"/> </div> </div> <hg-star-box hg-star-info="starInfo" name="{{cart.goodsDirVO.id}}" ng-if="ctrlData.starDone">商品评价: </hg-star-box> </ion-item> </ion-list> <ion-item> <hg-star-box hg-star-info="starInfo" name="logisticsStar" ng-if="ctrlData.starDone">物流评价: </hg-star-box> </br> <hg-star-box hg-star-info="starInfo" name="serviceStar" ng-if="ctrlData.starDone">服务评价: </hg-star-box> </ion-item>
具体的controller部分的代码如下:
$scope.ctrlData = {
starDone: false
};
$scope.initStarInfo = function () {
$scope.starInfo = {
item: function (name) {
if (name == 'logisticsStar') {
return {
callBack: function (vel) {
$rootScope.logistStar = vel;
console.log("$rootScope.logistStar:::" + $rootScope.logistStar);
}
};
} else if (name == 'serviceStar') {
return {
callBack: function (vel) {
$rootScope.serviceStar = vel;
console.log("$rootScope.serviceStar:::" + $rootScope.serviceStar);
}
};
} else {
return {
callBack: function (vel) {
console.log("name:::::"+name);
console.log("vel:::::"+vel);
for(var i = 0; i < $scope.goodIdList.length; i++){
if($scope.goodIdList[i] == name){
if($scope.productStarArray.length == 0){
$scope.product.name = name;
$scope.product.productStar = vel;
$rootScope.productStarArray.push( $scope.product);
}else if($scope.productStarArray.length >= $scope.goodIdList.length){
for(var f = 0; f < $scope.productStarArray.length; f++) {
if ($scope.productStarArray[f].name == name) {
$scope.productStarArray[f].name = name;
$scope.productStarArray[f].productStar = vel;
}
}
}else{
for(var j = 0; j < $rootScope.productStarArray.length; j++){
if( $rootScope.productStarArray[j].name == name){
$rootScope.productStarArray[j].name = name;
$rootScope.productStarArray[j].productStar = vel;
}else{
var object = {};
object.name = name;
object.productStar = vel;
var array = [];
array.push(object);
console.log("array:::"+angular.toJson(array));
$rootScope.productStarArray = $rootScope.productStarArray.concat(array)
}
}
}
}
}
}
};
}
}
};
$scope.ctrlData.starDone = true;
};
$scope.initStarInfo();
以上只是个人做的时候用的,命名也是自己项目中用的,如有错的地方请见谅!
相关文章推荐
- IOS-一步一步教你自定义评分星级条RatingBar
- ExtJS(3)- 自定义组件(星级评分)
- iOS开发篇(二)自定义评分星级条RatingBar
- Angularjs渲染的 using 指令的星级评分系统示例
- 打造通用的自定义评分星级RatingBar
- angularJs 自定义指令实现星级评分功能
- Android控件之RatingBar自定义星级评分样式
- 自定义的星级评分 starBar
- 自定义的星级评分 starBar
- android 自定义星级评分控件
- IOS-一步一步教你自定义评分星级条RatingBar ——转载的
- IOS-一步一步教你自定义评分星级条RatingBar
- jQuery动态星级评分效果实现方法
- jQuery插件入门学习—— 学习目标:写一个星级评分插件(jquery插件基础写法)
- MSSQL2005 批量更改表、存储过程、自定义函数的架构名
- AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
- angularJS中自定义服务的理解
- AngularJS 自定义表单验证$parsers
- 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素
- win7 开始 菜单 自定义 要显示的最近打开过的程序的数目 是灰色的 不可以更改 怎么解决?