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 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
JS中字符串trim()使用示例
May 26 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
树结构之JavaScript
Jan 24 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
小程序开发基础之view视图容器
Aug 21 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加速 eAccelerator配置和使用指南
2009/06/05 PHP
基于php split()函数的用法详解
2013/06/05 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php实现的通用图片处理类
2015/03/24 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
js style动态设置table高度
2014/10/21 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
详解ES6中的let命令
2020/04/05 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python 处理数据的实例详解
2017/08/10 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python模拟斗地主发牌
2020/04/22 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
请说出以下代码输出什么
2013/08/30 面试题
上班上网检讨书
2014/01/29 职场文书
期中考试后的反思
2014/02/08 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
单位委托书
2014/10/15 职场文书
简历中自我评价范文
2015/03/11 职场文书
小学音乐课教学反思
2016/02/18 职场文书
合同范本之电脑出租
2019/08/13 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript