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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
SVG实现时钟效果
2018/07/17 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python实现猜数字小游戏
2020/03/24 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python气泡提示与标签的实现
2020/04/01 Python
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
致800米运动员广播稿
2014/02/16 职场文书
主管竞聘书范文
2014/03/31 职场文书
护士医德医风自我评价
2014/09/15 职场文书
民间借贷协议书范本
2014/10/01 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
信用卡工资证明范本
2015/06/19 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python