AngularJS工厂/服务实现一个计算器

html代码

 <div ng-controller="calcCtrl">
        <select ng-model="type">
            <option value="active">动态响应模式</option>
            <option value="static">手动点击模式</option>
        </select>
        <input type="text" ng-model="num1">

        <select ng-model="operator">
            <option value="1">+</option>
            <option value="2">-</option>
            <option value="3">*</option>
            <option value="4">/</option>
        </select>

        <input type="text" ng-model="num2">

        <button id="bResult" type="button" ng-click="calculate()">=</button>

        <span>{{result}}</span>
    </div>

<select>标签<option>里面传的参数是value里的值

js代码

'use strict';

var app = angular.module('app', []);

app.controller('calcCtrl', function($scope, myService) {
        $scope.type = 'active';
        $scope.operator = '1';
        $scope.num1 = 0;
        $scope.num2 = 0;
        $scope.result = 0;

        $scope.calculate = function() {
        $scope.result =myService.getResult(Number($scope.num1), Number($scope.num2), $scope.operator);
        };

        var activeModeListen;

        $scope.$watch('type', function(newType) {
                if(newType == 'active') { //自动计算
                    $('#bResult').attr('disabled', 'true');
                    activeModeListen = $scope.$watchGroup(['num1', 'num2', 'operator'], function() {
                            $scope.result = myService.getResult(Number($scope.num1), Number($scope.num2), $scope.operator);
                        }
                    );
                }
                else if(newType == 'static') { //需要按等号
                    activeModeListen();
                    $('#bResult').removeAttr('disabled');
                }
            }
        );
    })
    .factory('myFactory', function() {
            var func = {};
            func.add = function(a, b) {
                if(a.toString().indexOf('.') != -1
                    && b.toString().indexOf('.') != -1) {
                        var sq1,sq2,m;
                        try {
                            sq1 = a.toString().split(".")[1].length;
                        }
                        catch (e) {
                            sq1 = 0;
                        }
                        try {
                            sq2 = b.toString().split(".")[1].length;
                        }
                        catch (e) {
                            sq2 = 0;
                        }
                        m = Math.pow(10,Math.max(sq1, sq2));
                        return (a * m + b * m) / m;
                    }
                    else {
                        return a + b;
                    }
            };

            func.minus = function(a, b) {
                return a - b;
            };

            func.multiply = function(a, b) {
                return a * b;
            };

            func.divided = function(a, b) {
                return a / b;
            };

            return func;//将声明的func对象返回
        }
    )
    .service('myService', function(myFactory) {
            this.getResult = function(m, n, operator) {
                var regExp = /[0-9]+/;
                if(!regExp.test(m) || !regExp.test(n)) {
                    alert('must input number instead of others type of variable')
                }
                else {
                    if(operator == '1') {
                        return myFactory.add(m, n);
                    }

                    else if(operator == '2') {
                        return myFactory.minus(m, n);
                    }

                    else if(operator == '3') {
                        return myFactory.multiply(m, n);
                    }

                    else if(operator == '4') {
                        return myFactory.divided(m, n);
                    }
                }
            };
        }
    );

js小数运算出现多位小数的解决方案

function addNum (num1, num2) {
 var sq1,sq2,m;
 try {
  sq1 = num1.toString().split(".")[1].length;
 }
 catch (e) {
  sq1 = 0;
 }
 try {
  sq2 = num2.toString().split(".")[1].length;
 }
 catch (e) {
  sq2 = 0;
 }
 m = Math.pow(10,Math.max(sq1, sq2));
 return (num1 * m + num2 * m) / m;
}
alert(addNum(0.1, 0.2));

工厂提供公用的方法
服务里面写逻辑关系实现某一个模块的功能,比如:一个登录注册界面,可以写两个服务

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值