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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 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 isset()与empty()的使用区别详解
2010/08/29 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
JS验证身份证有效性示例
2013/10/11 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
python根据距离和时长计算配速示例
2014/02/16 Python
zookeeper python接口实例详解
2018/01/18 Python
python保存网页图片到本地的方法
2018/07/24 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
城市精细化管理实施方案
2014/03/04 职场文书
仓库文员岗位职责
2014/04/06 职场文书
委托公证书
2014/04/08 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
正则表达式拆分url实例代码
2022/02/24 Java/Android
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python
Linux安装Docker详细教程
2022/07/07 Servers