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的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
随机推荐
- Springboot2本地锁实践
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交…. 下面我们利用 ...
- HDU 4828 (卡特兰数+逆元)
HDU 4828 Grids 思路:能够转化为卡特兰数,先把前n个人标为0,后n个人标为1.然后去全排列,全排列的数列,假设每一个1的前面相应的0大于等于1,那么就是满足的序列.假设把0看成入栈,1看 ...
- ioctl.h 分析
ioctl.h 分析 我自己画了个解析图...不要嫌弃丑啊.. . 哈哈 type The magic number. Just choose one number (after consulting ...
- JDBC-Statement 对象
Statement 对象 一旦我们获得了数据库的连接,我们就可以和数据库进行交互.JDBC 的 Statement,CallableStatement 和 PreparedStatement 接口定义 ...
- Darwin流媒体server在windows下搭建
简单介绍 主页: http://dss.macosforge.org/ Darwin Streaming Server (DSS) is an open sourceproject intende ...
- bzoj2463: [中山市选2009]谁能赢呢？(博弈论)
2463: [中山市选2009]谁能赢呢? 题目:传送门 题解: 水体! n为偶数的话必能被1*2的矩形覆盖,那么因为一开始在左上角,所以先手一定可以先组成一个矩形,那么先手肯定必胜! n为奇数和上面 ...
- xBIM 基础11 WeXplorer 常用事件
系列目录 [已更新最新开发文章,点击查看详细] 本篇将介绍查看器在不同场合触发的事件.所有这些都记录在xViewer中. 如果您从Web服务器运行本教程,可以在此处查看完整的实例.并且确保您的 ...
- Devexpress控件使用二：barManager
1.拖放控件 2.两种按钮显示形式 1)上面是大图标,下面是说明 a.Add → Largebutton 注:勾选 Show DesignTime enancements 才会出现Add b.添加图片 ...
- eclipse oxygen离线安装activiti
我用的最新版本的eclipse oxygen,结果通过help-->install new software-->add 一直报找不到,后来网上查找的离线安装,终于成功了,在这里和大家分享 ...
- IPv6理论知识详解
1. IPv6地址表示 IPv6地址可以表示为128位由0.1组成的字符串,为了便于计算机理解,将128位的二进制字符串表示为32位的十六进制字符串,为了便于理解,人们将其划分为8组,组与组之间用 : ...