angularjs 标签指令
2024-08-28 04:47:11
<!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>
最新文章
- ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑
- yii2获取登录前的页面url地址--电脑和微信浏览器上的实现以及yii2相关源码的学习
- 转载：Spring+EhCache缓存实例
- qt qml fuzzyPanel 毛玻璃效果
- EF增删改查基础
- 防止别人ping自己的服务器
- [SAP ABAP开发技术总结]消息处理Messages
- C Primer Plus之结构和其他数据形式
- C++：对象的初始化和构造函数
- windows2008 x86 安装 32位oracle
- Eratosthenes筛选法计算质数
- 在Livemedia的基础上开发自己的流媒体客户端
- Jmeter如何将上一个请求的结果作为下一个请求的参数——使用正则表达式提取器
- keras实现简单性别识别（二分类问题）
- JavaLinkedHashSet练习
- C语言的#if #ifdef #ifndef
- Hash之哈希表的详解
- My IELTS result has come out 我的雅思成绩出来了
- 洛谷P1216 数字三角形【dp】
- orcl regexp_like 的用法