AngularJS的控制器示例
代码下载: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中。
AngularJS的控制器示例的更多相关文章
- AngularJs开发——控制器间的通信
AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...
- AngularJS中的控制器示例_3
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- AngularJS中的控制器示例_2
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- AngularJS中的控制器示例
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- 前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...
- 前端MVC学习笔记(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...
- NodeJS+MongoDB+AngularJS+Bootstrap书店示例
目录 一.Bootstrap 1.1.添加引用 1.2.在页面中使用BootStrap 1.3.可视化布局 二.使用MongoDB创建数据库 2.1.启动MongoDB数据库 2.2.启动数据库GUI ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- angularjs 嵌套控制器,子控制器访问父控制器
<pre> http://www.lovelucy.info/understanding-scopes-in-angularjs.html http://blog.csdn.net/jfk ...
随机推荐
- [POJ 1001] Exponentiation C++解题报告 JAVA解题报告
Exponentiation Time Limit: 500MS Memory Limit: 10000K Total Submissions: 126980 Accepted: 30 ...
- cobbler 安装centos7.3时GPT问题(五)
磁盘分区表MBR和GPT介绍: MBR(Master Boot Record):最大只支持2 TB的盘,最多只支持4个主分区,信息只存储在一个区域. GPT(GUID partition table) ...
- javascript学习笔记 - 变量、作用域和内存问题
一 垃圾收集 javascript具有自动垃圾收集机制.由垃圾收集机制标找出不再使用的变量.按照固定间隔的时间进行销毁,释放内存. 1.找出不再使用的变量的方法,如下: 1-1.标记清除 垃圾回收器 ...
- 九度oj 题目1411:转圈
题目描述: 在一个有向图有n个顶点(编号从1到n),给一个起点s,问从起点出发,至少经过一条边,回到起点的最短距离. 输入: 输入包括多组,每组输入第一行包括三个整数n,m,s(1<=n< ...
- 【Luogu】P3806点分治模板(点分治)
题目链接 wc听不懂lca讲的高等数学专场(一个字都听不懂),然后就自学了点分治. 点分治就是我先处理完跟根有关的东西,然后把根标记掉,把原树拆成若干个联通块,然后分别对每个联通块(每个小树)搞一模一 ...
- Dango notes II: class-based views
A view is a callable which takes a request and returns a response. A view can be function (function- ...
- 洛谷P3768 简单的数学题 【莫比乌斯反演 + 杜教筛】
题目描述 求 \[\sum\limits_{i=1}^{n} \sum\limits_{j=1}^{n} i*j*gcd(i,j) \pmod{p}\] \(n<=10^{10}\),\(p\) ...
- LibreOJ2043 - 「CQOI2016」K 远点对
Portal Description 给出平面上的\(n(n\leq10^5)\)个整点,求在欧几里得距离下第\(k\)远的点对之间的距离. Solution k-d树+堆. 用小根堆维护当前找到的第 ...
- axis2生成webservice服务端返回String[]和String[][]一维数组和二维数组解析
环境:用axis2生成服务端,用aixs做客户端 1:直接返回String[]: public String[] testArr(String name) { String[] ret=new Str ...
- java面试题之wait(),notify()和suspend(),resume()之间的区别
wait()方法和notify()方法的区别: 这两个方法都是属于Object类中的,也是配套使用的,当调用这两个方法阻塞时要释放占用的锁,而锁是任何对象都具有的,调用任意对象的wait()方法导致线 ...