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的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
随机推荐
- 各种List、Map、Set的比較
前言:Java中用不同的数据结构(哈希表/动态数组/平衡树/链表)实现了不同的集合接口(List/Map/Set).大多数情况下,集合类被用于不须要线程安全地环境,所以后来的集合实现都没有再採用同步以 ...
- MyEclipse打包可运行的jar包
详细步骤: Export... -> java -> Runnable JAR file Launch configuration:选择main方法所在的文件/类 Export desti ...
- 扩展MARA 加入Z字段BAPI_TE_MARA
1. 在MARA中APPEND新的结构 2.在BAPI_TE_MARA中APPEND新的结构 (可是这里不能有QUAN,CURR,DEC等数据类型) 3.在BAPI_TE_MARAX中APPEND新的 ...
- "浪潮杯"第六届ACM山东省省赛山科场总结
从空间拷过来的.尽管已经过去一个月了.记忆犹新 也算是又一次拾起这个blog Just begin 看着一群群大牛还有队友男神的省赛总结都出了 我最终也耐不住寂寞 来做个流水账抒抒情好了 第一次省赛 ...
- hdu 4966 最小树形图
将每门课等级拆成0,1,2,3...a[i]个点,对每一个等级大于0的点向它低一级连边,权值为0[意思是,若修了level k.则level(0~k)都当做修了] 将输入的边建边,权值为money[i ...
- [Android] Android开发优化之——从代码角度进行优化
通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点,就 ...
- django steps EASY WAY
django 2.0 python 3.6 =========django steps EASY WAY=========== reference: https://djangoforbeginner ...
- web监控脚本
#!/bin/bashvalues=`curl -H 'Cache-Control: no-cache' -k -s -m 10 --connect-timeout 10 "$1" ...
- swift语言点评十四-继承
Overriding A subclass can provide its own custom implementation of an instance method, type method, ...
- Hadoop_HDFS-基础知识摘要
Hadoop典型应用有:搜索.日志处理.推荐系统.数据分析.视频图像分析.数据保存等.0.数据要首先分块 Block:将一个文件进行分块,通常是64M. NameNode:--管理节点保存整个文件系统 ...