ionic购物加减指令

app端做商城项目，在购物车或订单里面一般都会用到商品的增、减。这里封装这样的指令，利用angularjs的优势，可以使用复用，方便开发类似此类的加减。

1 drAddSubtrat指令

/*** Created by dzm on 2016/5/28.* 数字增减指令*/
directives.directive('drAddSubtrat', [function () {return {restrict:'AE',scope:{drNumber:'=',minValue:'@',maxValue:'@',drChange:'&'},replace:true,templateUrl:'js/directive/tpl/tpl-add-subtract.html',link:function(scope, element, atrrs){// 减scope.subtract = function(){var quantity = parseInt(scope.drNumber) - 1;if (!angular.isUndefined(scope.minValue) && quantityelse{scope.drNumber = quantity;}scope.drChange({value:scope.drNumber});}// 加scope.add = function(){var quantity = parseInt(scope.drNumber) + 1;if (!angular.isUndefined(scope.maxValue) && quantity>scope.maxValue){scope.drNumber = scope.maxValue;} else{scope.drNumber = quantity;}scope.drChange({value:scope.drNumber});}}}
}]);

2 tpl-add-subtract.html模板

"row row-no-padding">"col col-25 text-center">"button button-small button-clear min-plus" ng-click="subtract()">-"col col-50 text-center">"number" ng-keyup="validatei(this)" value="{{drNumber}}" class="text-center count-input" style="border-style:solid;padding: 0;">"col col-25 text-center">"button button-small button-clear min-plus" ng-click="add()" >+

3 css

.min-plus{font-size: 35px;font-weight: 100;
}
.count-input{width: 50px;border-bottom: solid #e1e1e1 1px;color:#999999;
}

3 controller调用
主要实现drChange里面的动作，在指令中scope.drChange({value:scope.drNumber});这段代码可以将值传到你定义的controller中了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！