小人儿的笔记（AngularJS）--01

最新推荐文章于 2025-08-07 08:15:00 发布

JtUnion

最新推荐文章于 2025-08-07 08:15:00 发布

阅读量337

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： event

本文链接：https://blog.youkuaiyun.com/JtUnion/article/details/54882662

web 专栏收录该内容

5 篇文章

订阅专栏

本文介绍AngularJS中的事件参数使用方法及简易计算器实现细节。通过两个示例，详细讲解如何利用$event参数处理按钮点击事件，并展示如何构建一个能进行基本运算的计算器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件参数$event

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

<input type="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 四舍五入为指定小数位数的数字
        }
    };

}])