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 相关文章推荐
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
JS实现继承的几种常用方式示例
2019/06/22 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
Python中的作用域规则详解
2015/01/30 Python
Python中enumerate函数代码解析
2017/10/31 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
任意存:BOXFUL
2018/05/21 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
用php如何解决大文件分片上传问题
2021/07/07 PHP
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS