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教程(21)——类(二)
Sep 15 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
js倒计时简单实现方法
Dec 17 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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
PHP4中实现动态代理
2006/10/09 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php上传文件常见问题总结
2015/02/03 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Python request操作步骤及代码实例
2020/04/13 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
军训心得体会
2013/12/31 职场文书
岗位职责说明书
2014/05/07 职场文书
中学生自我评价2015
2015/03/03 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
高中数学教学反思范文
2016/02/18 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
MySQL 数据表操作
2022/05/04 MySQL