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 ...
随机推荐
- Learning Deconvolution Network for Semantic Segme小结
题目:Learning Deconvolution Network for Semantic Segmentation 作者:Hyeonwoo Noh, Seunghoon Hong, Bohyung ...
- [转]物理CPU、CPU核数、逻辑CPU、超线程
转自:http://wulc.me/2016/01/06/物理CPU.CPU核数.逻辑CPU.超线程/ 基本概念 物理CPU: 物理CPU就是插在主机上的真实的CPU硬件,在Linux下可以数不同的p ...
- Concept with HTTP API && RPC
RPC=Remote Produce Call 是一种技术的概念名词. HTTP是一种协议,RPC可以通过HTTP来实现,也可以通过Socket自己实现一套协议来实现.所以楼主可以换一个问法,为何RP ...
- 【Luogu】P3356火星探险问题（费用流）
题目链接 网络流一条边都不能多连?没道理呀? 不过单看这题的确是个sb题…… #include<cstdio> #include<algorithm> #include< ...
- HDU——1874畅通工程续（邻接矩阵弗洛伊德）
畅通工程续 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- spring分布式事务控制
应用场景问题描述解决方法多数据源配置单元测试第一种方法:最大努力一次提交模式第二种方法:最大努力一次提交模式 但使用ChainedTransactionManagerChainedTransactio ...
- 需要打印真实尺寸大小等需求的，css的单位可以使用mm等做单位
今天甲方那边改需求了,要求打印出来的尺寸是85mm/55mm的,开始还一直在网上找px和mm的相关换算,结果去w3c看了,竟然还有mm单位的, 在这里做个笔记
- 【CF725D】Contest Balloons（贪心，堆）
题意:acm队伍可以得气球,相同气球数是一个排名.每个队伍有一个气球数上限,如果该队伍的气球数大于上限 该队伍被淘汰.给了你队伍的气球数,你的气球可以给别人,问你最大可能的排名. (2 ≤ n ≤ 3 ...
- Why do I keep getting mixed tabs and spaces in a Visual Studio C# code window?[vs power tools issue transfered]
goto tools->option->power tools-> turn "use mixed tabs" option to off. you won`t ...
- Codeforces Round #482 (Div. 2)
D. Kuro and GCD and XOR and SUM 字典树真好玩... 牛老板提供的思路:建1e5个 字典树,每个数插入到以它的因子为根所在的字典树中,这样就实现了整除,当然gcd(k, ...