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 ...
随机推荐
- 【mysql 优化 5】左连接和右连接优化
原文地址:8.2.1.8 Left Join and Right Join Optimization mysql以下列方式实现一个A left join B 连接条件: 1,表B设置为依赖于表A和A所 ...
- hdoj--1045<dfs&二分图最大匹配>（这里是dfs解法）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1045 题目描述: 在矩阵中放车,车可四面攻击,矩阵中有墙,可以防止攻击,给出墙的位置,输出最多可以放多 ...
- 使用grunt实现自动化单元测试
闲话不多说~ 使用步骤 1.安装插件 npm install grunt-contrib-qunit --save-dev 2.加载包含 "qunit" 任务的插件 grunt.l ...
- BZOJ 2806 [Ctsc2012]Cheat ——后缀自动机 单调队列优化DP
先建出广义后缀自动机. 然后跑出文章中每一个位置的最大匹配距离. 然后定义$f[i]$表示匹配到以$i$结尾的串时,最长的匹配距离. 显然可以二分$L$的取值. 然后容易得到$DP$方程 $f[i]= ...
- hdu5730 Shell Necklace 【分治fft】
题目 简述: 有一段长度为n的贝壳,将其划分为若干段,给出划分为每种长度的方案数,问有多少种划分方案 题解 设\(f[i]\)表示长度为\(i\)时的方案数 不难得dp方程: \[f[i] = \su ...
- 刷题总结——二逼平衡树（bzoj3224线段树套splay）
题目: Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:1.查询k在区间内的排名2.查询区间内排名为k的值3.修改某一位值上的数值4.查询k在 ...
- 学习 WebService 第三步：一个简单的实例（SoapUI测试REST项目）
原文地址:SOAPUI测试REST项目(六)——REST服务和WADL ↑↑↑ 原文用的SoapUI,2018-3-19时,这个软件已经更名为ReadyAPI(集成了SoapUI),因此下文中我重新截 ...
- float浮动的学习
很早以前就接触过CSS,然后就在也没有深入了解过.今天突然遇到有人问了关系浮动的问题,碰巧没事就将内容整理下,与大家交流学习. 首先大家也应该都知道,div是块级元素,在页面中独占一行,自上而下排列, ...
- eval()函数的巧用
eval的功能 将字符串str当成有效的表达式来执行.. 写函数,专门计算图形的面积 其中嵌套函数,计算圆的面积,正方形的面积和长方形的面积 调用函数area(‘圆形’,圆半径) 返回圆的面积 调用 ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...