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中的事件驱动
May 21 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
微信小程序左右滑动的实现代码
Dec 15 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
微信小程序代码上传、审核发布小程序
May 18 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
php 缓存函数代码
2008/08/27 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
Java如何获得ResultSet的总行数
2016/09/03 面试题
卫校毕业生个人自我鉴定
2014/04/28 职场文书
公司联欢会策划方案
2014/05/19 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
高中班主任评语
2014/12/30 职场文书
如何写辞职信
2015/05/13 职场文书
法院执行局工作总结
2015/08/11 职场文书