小人儿的笔记(AngularJS)--01

事件参数$event

例1 关于ag中的this及事件源:

"button" value="test" ng-click="doTest($event)">
------------------------------------
$scope.name="myname";
$scope.doTest=function(ent){
;//事件参数通过页面的$event传入

console.log(this.name);
;//myname--这里this不再表示事件源,而是当前作用域对象

console.log(ent.target.value);
;//test--事件源封装在事件参数的target属性中

console.log(angular.element(ent.target).val());
;//test--angular.element方法可以将DOM元素封装为jquery对象,如果引用了jquery库,则可以直接使用$函数
};

例2 简易计算器:

<div ng-controller="CalcController">
    <p>
        <label for="n1">数字1</label>
        <input type="text"  id="n1" ng-model="num1">
    </p>
    <p>
        <label for="n2">数字2</label>
        <input type="text"  id="n2" ng-model="num2">
    </p>
    <p>
        <input type="button" value="+" ng-click="doCalc($event)">
        <input type="button" value="-" ng-click="doCalc($event)">
        <input type="button" value="*" ng-click="doCalc($event)">
        <input type="button" value="/" ng-click="doCalc($event)">
    </p>
    <p>
        <h1>result:<span ng-bind="result"></span></h1>
    </p>
</div>
--------------------------------
angular.module('myApp', [])
.controller('CalcController', ['$scope', function($scope){
    $scope.doCalc=function(ent){
        var op=ent.target.value;
        if(isNaN(this.num1) || isNaN(this.num2)){
            $scope.result="无法计算";
        }
        else{
            var n1=parseFloat($scope.num1);
            //强制转换为浮点型
            var n2=parseFloat($scope.num2);
            console.log(typeof eval(n1+op+n2));
            $scope.result=eval(n1+op+n2).toFixed(3);
            //eval()把 参数string 进行计算,结果为number类型
            //toFixed()把 Number 四舍五入为指定小数位数的数字
        }
    };

}])

你可能感兴趣的:(web)