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学习笔记(十七)js 优化
Feb 04 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
javascript实现固定侧边栏
Feb 09 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php使用百度天气接口示例
2014/04/22 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
img的onload的另类用法
2008/01/10 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
物流管理专业大学生自荐信
2013/10/04 职场文书
英语教师岗位职责
2014/03/16 职场文书
卖房协议书
2014/04/11 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL