angularjs 标签指令
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.active1{ background:red;}
.active2{ background:blue;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.dataList = [
'aaaaa' , 'bbbbb' , 'cccccc' , 'dddddd' , 'eeeeee'
];
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="aaa"> //checkbox选中则aaa为true
<select>
<option></option>
<option ng-selected="aaa"></option> //下拉选择框是否选择取决于aaa变量
</select>
//输入框变化就会出发输入框的值为hello
<input type="text" ng-change="bbb='hello'" ng-model="bbb">{{bbb}}<br>
//ng-paste="ccc=true"当输入框复制操作时时ccc=true，
<input type="text" value="aasdassssssss" ng-paste="ccc=true">{{ccc}}
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$interval',function($scope,$interval){
var iNow = ;
$scope.text = iNow+'秒';
$scope.isDisabled = true;
//setInterval -> $scope.$apply()
//$timeout $interval
var timer = $interval(function(){
iNow--;
$scope.text = iNow+'秒'; if(iNow == ){
$interval.cancel(timer);
$scope.text = '可以点击啦';
$scope.isDisabled = false;
}
},);
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
//ng-disabled="isDisabled",isDisabled是变量名
<input type="button" ng-value="text" ng-disabled="isDisabled">
<input type="text" value="{{text}}" ng-readonly="isDisabled">
<input type="checkbox" value="{{text}}" ng-checked="isDisabled">
</div>
<script>
alert();
</script>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
//引入插件，ngSanitize模块
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngSanitize']); //['ngSanitize']是引入ngSanitize模块
m1.controller('Aaa',['$scope',function($scope){
$scope.text = '<h1>hello</h1>';
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<div ng-bind="text"></div> //跟ng-value和写表达式是一样的
<div ng-bind-template="{{text}},{{text}}"></div> //ng-bind-template用于写多个表达式
<div ng-bind-html="text"></div> //解析html内容，要引入ngSanitize模块
<div ng-cloak>{{text}}</div> //ng-cloak用于没有解析完毕时不显示解析完毕后解析，用户体验好。
<div ng-non-bindable>{{text}}</div> //原样输出，不进行解析。
</div>
<script>
alert(); //阻止后面的js的执行
</script>
</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.style = "{color:'red',background:'yellow'}";
$scope.sClass = "{red:true,yellow:true}";
$scope.url = "http://www.baidu.com";
}]);
</script>
</head> <body>
<div ng-controller="Aaa">
<div ng-class="{red:true}">{{text}}</div> //激活red样式
<div ng-class="{red:true,yellow:true}">{{text}}</div> //激活red和yellow样式
<div ng-class="{{sClass}}">{{text}}</div>
<div ng-style="{color:'red',background:'yellow'}">{{text}}</div>
<div ng-style="{{style}}">{{text}}</div>
<a ng-href="{{url}}">aaaaaaa</a>
<a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-class="" ng-attr-style="">aaaaaaa</a>
</div>
<script>
alert(); //阻止后面js的执行
</script>
</body>
</html>
angularjs 标签指令的更多相关文章
- AngularJS之指令
紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 《AngularJS》--指令的相互调用
转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- AngularJs:Directive指令用法
摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...
- 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- AngularJs自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- angularJS自定义指令间的“沟通”
由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...
随机推荐
- poj2965 The Pilots Brothers' refrigerator（直接计算或枚举Enum+dfs）
转载请注明出处:http://blog.csdn.net/u012860063? viewmode=contents 题目链接:http://poj.org/problem? id=2965 ---- ...
- 【struts2】struts2中的流接收与流发送
[前言]在我们的struts2后端中,实现流的接收和发送.就能够实现向server传视频流以及下载图片. [流接收] 如今举一个传公钥的样例.struts2用一个action接收Key,而Key就是用 ...
- Android 自己定义RecyclerView 实现真正的Gallery效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38173061 .本文出自:[张鸿洋的博客] 上一篇博客我使用自己定义Horizo ...
- Perl怎样过滤html标签
比方一串字符串 <div><b>123</b></div> 假设仅仅想拿到123怎么办呢? 用perl的正則表達式能够非常easy的做到. $str = ...
- HDU5638 / BestCoder Round #74 (div.1) 1003 Toposort 线段树+拓扑排序
Toposort 问题描述 给出nn个点mm条边的有向无环图. 要求删掉恰好kk条边使得字典序最小的拓扑序列尽可能小. 输入描述 输入包含多组数据. 第一行有一个整数TT, 表示测试数据组数. 对 ...
- [luogu P4197] Peaks 解题报告（在线：kruskal重构树+主席树 离线：主席树+线段树合并）
题目链接: https://www.luogu.org/problemnew/show/P4197 题目: 在Bytemountains有N座山峰,每座山峰有他的高度$h_i$.有些山峰之间有双向道路 ...
- DateForamt和SimpleDateFormat
1.因为DateFormat是抽象类,所以只能用子类来初始化 DateFormat df = new SimpleDateFormat("yyyy--MM--dd HH:MM:ss,属于本年 ...
- 如何在SQLServer中处理每天四亿三千万记录的
项目背景 这是给某数据中心做的一个项目,项目难度之大令人发指,这个项目真正的让我感觉到了,商场如战场,而我只是其中的一个小兵,太多的战术,太多的高层之间的较量,太多的内幕了.具体这个项目的情况,我有空 ...
- 记一次mysql性能优化过程
摘要: 所谓mysql的优化,三分是配置的优化,七分是sql语句的优化,通过一些案例分析,希望给大家在工作中带来一些思路 由于配置是运行过那么长时间,很稳定,基本上不考虑,所以本次主要是sql的优化, ...
- SGU 180 Inversions【树状数组】
题意:求逆序数 和POJ那题求逆序数的一样,不过这题离散化之后,要去一下重,然后要开到long long #include<iostream> #include<cstdio> ...