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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
深入理解javascript变量声明
Nov 20 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 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 和 COM
2006/10/09 PHP
模仿OSO的论坛(五)
2006/10/09 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
jquery插件validate验证的小例子
2013/05/08 Javascript
node.js中watch机制详解
2014/11/17 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
Python 实现简单的电话本功能
2015/08/09 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python 表格打印代码实例解析
2019/10/12 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
UNIX文件系统分类
2014/11/11 面试题
公司经理聘任书
2014/03/29 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
认错检讨书
2014/10/02 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
Redis分布式锁Redlock的实现
2021/08/07 Redis
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers