AngularJS的控制器示例
2024-09-07 21:24:00
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCtrl.rar
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="notesApp"> <head> <title> New Document </title> <meta charset="utf-8"> <script src="angular1.4.6.min.js"></script> </head> <body ng-controller="MainCtrl as ctrl"> <h1>{{ctrl.msg}} AngularJS</h1> <button ng-click="ctrl.changeMsg()">Cg</button> </body> </html> <script type="text/javascript"> <!-- angular.module('notesApp',[]) .controller('MainCtrl',[function(){ var self=this; self.msg='Hello'; self.changeMsg=function(){ if(self.msg=='Hello'){ self.msg='Goodbye'; }else{ self.msg='Hello'; } }; }]); //--> </script>
点击按钮前后的效果:
要点:
任何定义在控制器实例上的变量都是可以访问的,也能在html中呈现给用户。大部分情况可以用这种方式将数据显示在UI中。
最新文章
- URL-Short
- DJANGO结合jQuery cxSelect 作二级菜单过滤
- 静态Web开发 DOM
- SSO单点登录之跨域问题
- CSS3中的选择器
- UVA 10465 Homer Simpson(dp + 完全背包)
- [SinGuLaRiTy] COCI 2016~2017 #5
- Linux轻松使用vim
- ORACLE关于段的HEADER_BLOCK的一点浅析
- Naive Bayes (NB Model) 初识
- Java IO学习--(二)文件
- git知识整理
- js使页面重定向
- NATS—协议详解(nats-protocol)
- angular2 脏检查机制
- OpenCV——掩膜(又称掩码)mask的原理和作用
- JS跨域设置和取Cookie
- cp自动创建层级结构的例子
- Cheatsheet: 2018 03.01 ~ 2018 03.31
- 自己开发Thinkpad电源管理程序