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 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php mail to 配置详解
2014/01/16 PHP
php接口技术实例详解
2016/12/07 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
js 提交和设置表单的值
2008/12/19 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
应届生面试求职信
2014/07/02 职场文书
身边的榜样活动方案
2014/08/20 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
工作简报范文
2015/07/21 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
在CSS中使用when/else的方法
2022/01/18 HTML / CSS