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


Posted in Javascript onOctober 10, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
浅析vue-router原理
Oct 19 Javascript
Vue指令指令大全
Feb 09 Javascript
JavaScript实现计数器基础方法
Oct 10 #Javascript
JS实现合并json对象的方法
Oct 10 #Javascript
jQuery实现的form转json经典示例
Oct 10 #jQuery
JS实现websocket长轮询实时消息提示的效果
Oct 10 #Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 #Javascript
vue.js实现简单轮播图效果
Oct 10 #Javascript
seajs中最常用的7个功能、配置示例
Oct 10 #Javascript
You might like
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php递归函数怎么用才有效
2018/02/24 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
python如何重载模块实例解析
2018/01/25 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python定时截屏实现
2020/11/02 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
公务员转正考察材料
2014/02/07 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
年会主持人开场白台词
2015/05/29 职场文书
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers