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 ...
随机推荐
- Selenium WebDriver-actionchain模拟鼠标右键操作
#encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...
- maven项目打包jar，含有依赖jar
在pom文件中添加一下插件 <plugin> <artifactId>maven-assembly-plugin</artifactId> <configur ...
- js只能输入汉字
var reg = new RegExp("[\\u4E00-\\u9FFF]+","g"); if(reg.test(val)){ al ...
- 【Luogu】P2155沙拉公主的困惑（数论）
题目链接 数论果然是硬伤qwq 还是智商上的硬伤 我们来讲两个道理 No.1 求1~i!中与i!互质的数的个数 实际上就是求i!的欧拉函数 有如下递推式: f[1]=1 if(i为合数) f[i]=f ...
- [AtCoderContest015D]A or...or B Problem
[AtCoderContest015D]A or...or B Problem 试题描述 Nukes has an integer that can be represented as the bit ...
- BZOJ 4868 [Shoi2017]期末考试 ——三分 枚举
考场上xjb三分过掉了. 然后$sdfzyhx$.$silvernebula$ $O(n)$虐掉了. 我还是太菜了 #include <cstdio> #include <cmath ...
- SVN改地址eclipse怎么同步
步骤有3 : 首先保证:Windows-> preservences->SVN的接口Client为 1.8以上的 1 ) 打开eclipse中SVN资源库 在Eclipse中选择Win ...
- java面试题之java中用到的线程调度算法是什么
抢占式.一个线程用完CPU之后,操作系统会根据线程优先级.线程饥饿情况等数据算出一个总的优先级并分配下一个时间片给某个线程执行. 操作系统中可能会出现某条线程常常获取到VPU控制权的情况,为了让某些优 ...
- java面试之String源码中equals具体实现
废话不多说,直接看代码,注释已经写在上面了: public boolean equals(Object anObject) { if (this == anObject) {//比较两个对象的地址 r ...
- Atcoder CODE FESTIVAL 2017 qual B D - 101 to 010 dp
题目链接 题意 对于一个\(01\)串,如果其中存在子串\(101\),则可以将它变成\(010\). 问最多能进行多少次这样的操作. 思路 官方题解 转化 倒过来考虑. 考虑,最终得到的串中的\(' ...