AngularJS函数绑定

当前位置:首页 > 日记 > 正文

AngularJS中控制器函数的定义与使用方法示例

AngularJS中控制器函数的定义与使用方法示例

本文实例讲述了AngularJS中控制器函数的定义与使用方法。分享给大家供大家参考,具体如下:

HTML正文:

<body ng-app="myApp" ng-controller="myCtrl"><h2>AngularJS函数绑定</h2><textarea ng-model="message" cols="40" rows="10"></textarea><p><button ng-click="save()">保存</button><button ng-click="clear()">清除</button></p><p>剩余字数: <span ng-bind="left()"></span></p><!-- AngualrJS的显示和隐藏逻辑控制指令:类似avalon中的ms-visible和knockout的visible指令 --><div ng-show="flag">结果:<font color="red"><span ng-bind="result"></span></font></div>

Javascript操作代码:

/** * AngularJS将属性和函数直接看作是controller的平等成员, * 可以调用函数按照普通的属性的调用方式即可(knockout avalon 部分Jquery插件也是使用这种方式定义函数) */var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) {  $scope.message = "";  $scope.result="";  $scope.flag=false;  $scope.left = function() {return 100 - $scope.message.length;};  $scope.clear = function() {    $scope.message = "";    $scope.result= $scope.message;    $scope.flag=false;  };  $scope.save = function() {     $scope.result= $scope.message;     $scope.flag=true;  };});

效果:

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

jQuery瀑布流的简单实现代码

jQuery瀑布流的简单实现代码

瀑布流,简单实现,代码,电脑软件,jQuery,简单版的Jquery实现图片瀑布流思路,供大家参考,具体内容如下注意:本篇文章基于知道每张图片的实际尺寸的情况下特点:列数自适应,图片宽度固定已知BUG:像本案例中的刚好5张图片循环显示且只有5列的情况…

利用Chrome DevTools直接调试Node.

利用Chrome DevTools直接调试Node.

方法,并行,调试,详解,电脑软件,前提Node.js 6.3+, 这个可上Node.js官网自行下载;Chrome 55+. 如果您本地的chrome升级到最新版后还是<55, 可以从此处下载:Chrome Canary,亲测可行。配置就目前来说,在浏览器端并行调试JavaScript与Node.js还属于…

js控制按钮,防止频繁点击响应的实

js控制按钮,防止频繁点击响应的实

控制,响应,频繁,实例,按钮,为了防止频繁点击按钮,可以采用一个策略,点击一次后让按钮灰掉,暂时不可以用,一段时间后再可以用,伪代码如下:var clicktag = 0; $('.a_cc').click(function () { if (clicktag == 0) { clickta…

解决局域网不能互相访问之全攻略

解决局域网不能互相访问之全攻略

局域网,全攻略,电脑软件,一般都是简单的设置和物理上的原因,其中XP之间不能互相访问是最近频繁遇到的问题。这篇文章就是来解决这些问题.分两个部分 一: 设置 现在,已经有许多人在使用Win2000和WinXP来联网,但在具体使用中有许多网友反映在Win…

wps文字如何同时打开两个文档wps文

wps文字如何同时打开两个文档wps文

文档,文字,方法,两个,电脑软件,  我们在办公时有时需要对两份文档进行对比,下面小编介绍下wps文字进行文档比较的方法。希望对你有帮助!wps文字同时打开两个文档的方法打开需要进行比较的文档。wps文字同时打开两个文档的方法图1  选择视…

详解vue嵌套路由-query传递参数

详解vue嵌套路由-query传递参数

嵌套,传递参数,路由,详解,电脑软件,在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 paramsindex.html<div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <rout…

简单谈谈axios中的get,post方法

简单谈谈axios中的get,post方法

方法,简单,电脑软件,post,axios,学习vue和nodejs的过程当中,涉及到了axios,今天为了测试,写了get和post两个方法来跟node服务端交互,结果因为header和参数弄了好久,在此记录一下,同时分享;由于刚接触axios,在测试方法中,写的都是很简单的东西,不过能…

为JQuery EasyUI 表单组件增加焦点

为JQuery EasyUI 表单组件增加焦点

表单,方法,组件,功能,焦点,1、背景说明 在使用 JQuery EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabindex 不起作用,因为页面看到的元素,是生成的,没有tabinde…

ps怎么设计一款漂亮梦幻的中秋海报

ps怎么设计一款漂亮梦幻的中秋海报

中秋,海报,梦幻,漂亮,电脑软件,今天我们就来看看ps设计中秋节海报的教程,中秋节马上到了,学习制作一个中秋海报也不错,请看下文详细介绍。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、新建图层填充颜…

PS怎么制作透明的彩色线稿图?

PS怎么制作透明的彩色线稿图?

透明,彩色,电脑软件,PS,线稿图,大多数人提到PS时想到的是修图,磨皮。接下来给大家介绍新的玩法:如何使用PS制作透明彩色线稿图。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、打开一张需要制作的jpg…

WPS表格照相机使用方法是什么

WPS表格照相机使用方法是什么

照相机,使用方法,表格,电脑软件,WPS,  也许你有发现,在WPS工具栏中有一个&ldquo;照相机&rdquo;功能,可以用来拍照吗?以下是小编为您带来的关于WPS照相机使用方法,希望对您有所帮助。WPS照相机使用方法一、我们先在表格中建立一个数据区域并…

ps怎么合成人物头像创意海报?

ps怎么合成人物头像创意海报?

创意,头像,海报,人物,电脑软件,ps想要设计一幅人物头像创意海报,该怎么设计呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、准备素材和新建文件2、把人物的头部抠出来,…