angularJS(六)angularJsDemo之事件

忘是亡心i 2022-02-23 01:08 228阅读 0赞

### 需求：输入两个数通过点击事件来得出结果 ###

![20190405180719421.png][]

![20190405181019179.png][]

### 这里会用到click事件 ###

### 代码如下： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70][]

<html>
    <head>
    <title>anguarJs入门小demo 事件</title>
    <script src="angular.min.js"></script>	
    <script>
    //建立模块
    var app=angular.module("myApp",[]);
    //创建控制器   $scope控制层与视图层交换的桥梁
    app.controller("myController",function($scope){
    $scope.add=function(){
     $scope.z= parseInt($scope.x)+parseInt($scope.y);
    }
    }
    );
    </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
    第一个数:<input ng-model="x">     第二个数<input ng-model="y">
    <button ng-click="add()">运算</button>
    运算结果:{
       {z}}
    </body>
    </html>

[20190405180719421.png]: /images/20220223/3bdb76e0609c48248fefa6bb29bd0826.png
[20190405181019179.png]: /images/20220223/b86ce61a614b4838b72b1781ce89279d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70]: /images/20220223/c545cbac323b48d2b67e950eeff872b4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 angularJS(二)angularJsDemo之表达式

第一步先引入js [angularJs下载地址][angularJs] <html> <head> <title>anguarJs入门小demo 表达

港控/mmm°/ 2022年02月25日 05:42/ 0 赞/ 201 阅读

相关 angularJS(九)angularJsDemo之内置服务$http

需求如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

ゝ一世哀愁。/ 2022年02月23日 01:40/ 0 赞/ 207 阅读

相关 angularJS(八)angularJsDemo之循环对象

需求：angularJs之循环对象 ![20190405182700823.png][] 实现如下 ![watermark_type_ZmFuZ3poZW5

约定不等于承诺〃/ 2022年02月23日 01:14/ 0 赞/ 203 阅读

相关 angularJS(七)angularJsDemo之循环数组

需求如下：用angularJs实现数组得循环 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

ゝ一纸荒年。/ 2022年02月23日 01:12/ 0 赞/ 211 阅读

相关 angularJS(六)angularJsDemo之事件

需求：输入两个数通过点击事件来得出结果 ![20190405180719421.png][] ![20190405181019179.png][] 这里会用到cl

忘是亡心i/ 2022年02月23日 01:08/ 0 赞/ 229 阅读

相关 angularJS(五)angularJsDemo之控制器

需求：实现两个数相加 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

我不是女神ヾ/ 2022年02月23日 00:56/ 0 赞/ 270 阅读

相关 angularJS(四)angularJsDemo之初始化

需求：在加载的时候进行初始化 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

分手后的思念是犯贱/ 2022年02月23日 00:38/ 0 赞/ 234 阅读

相关 angularJS(三)angularJsDemo之双向绑定

需求：文本框输入什么后面显示什么 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

红太狼/ 2022年02月23日 00:28/ 0 赞/ 252 阅读

相关 AngularJS事件

一.事件 1.ng-click 指令允许当一个元素被点击后执行指定的表达式。 <input type="button" value="add-count" ng-cli

￡神魔★判官ぃ/ 2021年09月14日 06:58/ 0 赞/ 405 阅读

相关 AngularJs 事件机制

AngularJs事件机制 1、ng-无on的事件名='函数名(参数必须是NG变量)',对元素添加事件机制,回调函数需要在控制器脚本中实现

Bertha 。/ 2021年07月24日 20:10/ 0 赞/ 433 阅读