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 相关文章推荐
调试代码导致IE出错的避免方法
Apr 04 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
原生JS实现音乐播放器
Jan 26 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
php输出xml格式字符串(用的这个)
2012/07/12 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
优秀中学生事迹材料
2014/01/31 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
护理专业求职信
2014/06/15 职场文书
质量负责人岗位职责
2015/02/15 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS