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的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
随机推荐
- C#WIFI搜索与连接
1.功能搜索WIFI并连接 2.所用工具及资源:VS2012 Managed Wifi API(即:引用ManagedWifi.dll文件地址:http://files.cnblogs.com/fil ...
- Codeforces 10A-Power Consumption Calculation(模拟)
A. Power Consumption Calculation time limit per test 1 second memory limit per test 256 megabytes in ...
- Android使用有道翻译API实如今线翻译功能
在Android应用中,加入在线翻译的功能,这里调用的是有道翻译的API. 使用有道翻译API.首先要申请一个key,申请地址为:path=data-mode">有道翻译API申请地址 ...
- _00017 Kafka的体系结构介绍以及Kafka入门案例(0基础案例+Java API的使用)
博文作者:妳那伊抹微笑 itdog8 地址链接 : http://www.itdog8.com(个人链接) 博客地址:http://blog.csdn.net/u012185296 博文标题:_000 ...
- POJ 1948 DP
题意:给你n个木棍(n<=40)每个木棍长度<=40,问用上所有的木棍拼成的三角形的面积的最大值,并输出面积*100的值(不四舍五入) 如果没有解,输出-1. 思路: 背包判断可达性. f ...
- 【转】IIS初始化（预加载），解决第一次访问慢，程序池被回收问题
原地址:http://www.debugrun.com/a/mpyWXwg.html 读在最前面: 1.本文以IIS8,Windows Server 2012R2做为案例 2.IIS8 运行在 Win ...
- hiho 1572 - set.upper_bound,排序树
链接 小Hi家的阳台上摆着一排N个空花盆,编号1~N.从第一天开始,小Hi每天会选择其中一个还空着花盆,栽种一株月季花,直到N个花盆都栽种满月季. 我们知道小Hi每天选择的花盆的编号依次是A1, A2 ...
- hiho1469 - 简单dp
题目链接 题目大意: 从一个大正方形数组里面找一个小正方形,满足其中的每个位置上的数都恰好比他的左边的那个和上边的那个大1(如果左边或上边的那个不存在的话就无此要求). 比如 1 2 32 3 43 ...
- Activiti BPMN 2.0 designer eclipse插件安装
官方网是这样说的: https://www.activiti.org/userguide/index.html#springSpringBoot The following installation ...
- 3ds Max脚本的使用实例教程
本教程主要讲解了一个关于草地脚本的使用,应用到max与photoshop的一些命令及参数设置. 这个场景使用了3DSMAX5.1进行建模,使用VRAY渲染器进行的渲染,并且在最后使用PHOTOSHOP ...