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处理table表格的代码
Dec 06 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
js实现秒表计时器
Dec 16 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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中通过curl smtp发送邮件
2012/06/05 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python基础语言学习笔记总结(精华)
2017/11/14 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python实现磁盘日志清理的示例
2020/11/05 Python
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
工艺工程师工作职责
2013/11/23 职场文书
一份文言文检讨书
2014/09/13 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
长江七号观后感
2015/06/11 职场文书
用Python实现Newton插值法
2021/04/17 Python
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL