angularjs 指令2
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</head> <body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn"> //是否选中，不选中会改变bBtn的值会改变下面的隐藏显示。
<div ng-show="bBtn">aaaaaaaaaaaa</div> //隐藏显示，占布局。
<div ng-if="bBtn">aaaaaaaaaaaa</div> //隐藏显示，不占布局。
<div ng-switch on="bBtn"> //切换
<p ng-switch-default>默认的效果</p>
<p ng-switch-when="false">切换的效果</p>
</div> <details ng-open="bBtn"> //details是描述性的标签
<summary>Copyright .</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.text = 'hello';
$scope.arr = [['a','b'],['c','d']];
}]);
</script>
</head> <body>
<div ng-controller="Aaa" ng-init="text='hello'">
{{ text }}
</div>
<div ng-controller="Aaa">
<div ng-repeat="arrOuter in arr" ng-init="outerIndex = $index"> //遍历时输出索引
<div ng-repeat="arrInner in arrOuter" ng-init="innerIndex = $index"> //遍历时输出索引
<p>{{arrInner}}:{{outerIndex}}{{innerIndex}}</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.arr = [['a','b'],['c','d']];
}]);
</script>
</head>
<body>
<div ng-controller="Aaa" ng-include="'temp.html'"> 包含其余页面
</div>
</body>
</html> temp.html：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script> var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.text = 'hello';
}]); //面向对象的写法（在原型上扩展）防止写的太多。
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',FnAaa]);
function FnAaa($scope){//构造函数也可以看成是对象
}
FnAaa.prototype.num = ''; //给对象添加属性
FnAaa.prototype.text = 'hello';
FnAaa.prototype.show = function(){
return 'angularJS';
};
</script>
</head>
<body> <div ng-controller="Aaa"> //ng-model="text"当输入框输入值的时候text变量会改变从而触发其余地方也改变，ng-model-options是说只有在光标移除输入框时才改变text变量的值。
<input type="text" ng-model="text" ng-model-options="{updateOn : 'blur'}">
<div>{{text}}</div>
</div> <div ng-controller="FnAaa as a1"> //as是创建了一个对象。
<div>{{a1.text}}:{{a1.show()}}</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script> var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.colors = [
{ name : 'red' },
{ name : 'yellow' },
{ name : 'blue' }
];
}]); </script>
</head> <body>
//ng-app="myApp"指定anguarjs解析的范围，
<div ng-app="myApp" ng-controller="Aaa">
<a href="">{{myColor.name}}</a>
//下拉菜单，ng-model="myColor"是选择之后的值给myColor，改变myColor会引起上面的值也改变（变量在一处变化整个页面都变化）。
<select ng-options=" color.name for color in colors " ng-model="myColor">
</select>
<form novalidate>
<input type="email">
</form>
</div>
<a href="">bbbbbbb</a>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script> var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.colors = [
{ name : 'red' },
{ name : 'yellow' },
{ name : 'blue' }
];
}]); </script>
</head> <body>
//ng-app="myApp"指定anguarjs解析的范围，
<div ng-app="myApp" ng-controller="Aaa">
<a href="">{{myColor.name}}</a>
//下拉菜单，ng-model="myColor"是选择之后的值给myColor，改变myColor会引起上面的值也改变（变量在一处变化整个页面都变化）。
<select ng-options=" color.name for color in colors " ng-model="myColor">
</select>
<form novalidate>
<input type="email">
</form>
</div>
<a href="">bbbbbbb</a>
</body>
</html>
angularjs 指令2的更多相关文章
- AngularJS指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- angularjs指令参数transclude
angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...
- angularjs 指令—— 绑定策略（@、=、&）
angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...
- AngularJS 指令
AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指 ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- angularJs指令执行的机制==大概的三个阶段
第一阶段:加载阶段 angularJs要运行的话,需要去等待angular.js加载完成,加载完之后呢,angular就会去查找到ng-app这个指令,ng-app在每个应用里面只能出现一次, 它也就 ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJs指令（一）
AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
随机推荐
- PatentTips – Java native function calling
BACKGROUND OF INVENTION This invention relates to a system and method for providing a native functio ...
- Tokyo Tyrant（TTServer）系列（二）－启动參数和配置
启动參数介绍 ttserver命令能够启动一个数据库实例.由于数据库已经实现了Tokyo Cabinet的抽象API,所以能够在启动的时候指定数据库的配置类型. 支持的数据库类型有: ...
- [CSS3] Create Dynamic Styles with CSS Variables
In this lesson we are going to use CSS variables to keep our application's colors consistent. This i ...
- UIScrollView加入控件，控件距离顶部始终有间距的问题
今天.特别郁闷.自己定义了一个UIScrollView,然后在它里面加入控件,如UIButton *button = [[UIButton alloc] initWithFrame:CGRectMak ...
- hello world to php( mac 配置 xmapp virtual host)
一.安装xmapp.安装完以后查看,服务是否都能启动(数据库和server) 二.配置自己的virtualhost 1.系统host文件加入server的域名(在浏览器中输入域名后会先通过 ...
- c#将List<T>转换成DataSet
/// <summary> /// List<T> 转换成DataSet /// </summary> /// &l ...
- UVA 1016 - Silly Sort 置换分解 贪心
Silly Sort Your younger brother has an assignment and needs s ...
- m_Orchestrate learning system---一、amazeui如何使用
m_Orchestrate learning system---一.amazeui如何使用 一.总结 一句话总结:先花几分钟把所有功能稍微看一下,然后做的时候就会特别快,所以,多学习,学得越多做的越快 ...
- [HEOI2016/TJOI2016] 排序 解题报告（二分答案/线段树分裂合并+set）
题目链接: https://www.luogu.org/problemnew/show/P2824 题目描述: 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在 ...
- 从 MVC 到微服务，技术演变的必经之路
架构模式演进 CGI 模式 图 1 CGI 出现于 1993 年,图 1 是 CGI 模式比较简单的结构图. MVC 模式 开源电商软件等都是采用 MVC 模式,MVC 模式是做软件开发必学和必经历的 ...