更改後angularjs自定義星級評分
阿新 • • 發佈:2019-02-10
自定義控制器directive程式碼如下:
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();
以上只是個人做的時候用的,命名也是自己專案中用的,如有錯的地方請見諒!