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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
JS hashMap实例详解
May 26 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
vue elementui tree 任意级别拖拽功能代码
Aug 31 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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP抽象类 介绍
2012/06/13 PHP
php GUID生成函数和类
2014/03/10 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
详解json在php中的应用
2018/09/30 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
微信小程序转发事件实现解析
2019/10/22 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
一份python入门应该看的学习资料
2018/04/11 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
python图片合成的示例
2020/11/09 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
Linux常见面试题
2016/10/04 面试题
运动会邀请函范文
2014/01/31 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
2019新员工心得体会
2019/06/25 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android