angularJs(1)指令篇
- angularJs模板
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../angular.js"></script>
</head>
<body ng-app="app" ng-controller="ctr"> <script>
angular.module('app',[])
.controller('ctr', function ($scope) { })
</script>
</body>
</html>
常见的指令
- ng-model
- ng-bind
- ng-bind-html
- ng-if
- ng-show
- ng-hide
- ng-reapeat
- ng-href
- ng-src
- ng-disable
- ng-checked
- ng-selected
- ng-class
- ng-style
- .. 下面介绍的是一些比较常见相对复杂一点的
- ng-reapeat
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../angular.js"></script>
</head>
<body ng-app="app" ng-controller="ctr">
<select ng-model="str">
<option ng-repeat="(k,v) in data track by $index">{{v}}</option>
</select>
{{str}} <script>
angular.module('app',[])
.controller('ctr', function ($scope) {
$scope.data=[1,23,5,54,8,4,8]
})
</script>
</body>
</html>(k,v) in data track by $index 可分别输出key,value
str的值会是选中option中标签里面的内容 - ng-cloak
解决数据未加载是出现的双括号{{}},对含有那个数据属性的块为加载数据之前为隐藏<style>
[ng-cloak]{
display: none;
}
</style>
</head>
<body ng-app>
<p ng-cloak="">{{'asdada'+'dads'}}</p>
<script src="angular.js"></script>
</body> ng-class
7 <style>
8 .red{
9 color: red;
10 }
11 .yellow{
12 color: yellow;
13 }
14 </style>
15 </head>
16 <body ng-app="app" ng-controller="ctr">
17 <!--方法1
18 <p ng-class="{'true':'red','false':'yellow'}[flag]"> 我是内容</p>
19 -->
20 <!--方法2-->
21 <p ng-class="{'yellow':flag}"> 我是内容</p>
22
23 <!--方法3
24 <p class="{{变量}}"> 我是内容</p>
25 -->
26 <button ng-click="fn()">按钮{{flag}}</button>
27 <script>
28 angular.module('app',[])
29 .controller('ctr', function ($scope) {
30 $scope.flag=true;
31 $scope.fn= function () {
32 $scope.flag=!$scope.flag;
33 }
34 })
36 </script>ng-style
1<
p
ng-style={'color':'red'}>53456</
p
>
ng-selected
1<
option
value="red" ng-selected='true'>红</
option
>
ng-switch
<div ng-init="str=1" ng-switch="str">
<div ng-switch-when="red">我是red</div>
<div ng-switch-when="yellow">我是yellow</div>
<div ng-switch-when="blue">我是blue</div>
<div ng-switch-default="">我没被选</div>
</div>ng-cheched='str'
这里的str不会将数据返回$scope只吧数据返回视图<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.red{
color:red;
}
</style>
</head>
<body ng-controller="ctr">
<p><input type="checkbox" ng-model="str"/>是否全选</p>
<ul>
<!-- ng-checked只会从数据到视图 --单向绑定
而ng-model会把数据同步到视图,也会把视图的改变同步到数据------双向绑定-->
<li>选项01<input type="checkbox" ng-checked="str"/></li>
<li>选项02<input type="checkbox" ng-checked="str"/></li>
<li>选项03<input type="checkbox" ng-checked="str"/></li>
<li>选项04<input type="checkbox" ng-checked="str"/></li>
<li>选项05<input type="checkbox" ng-checked="str"/></li>
</ul>
<strong>{{str}}</strong>
</body>
<script src="angular.js"></script>
<script>
angular.module('app',[])
.controller('ctr',function($scope){
$scope.data=['张三','王五','李四','赵六','赵六'] })
</script>
</html>
angularJs(1)指令篇的更多相关文章
- AngularJS之指令
紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...
- AngularJs自定义指令详解(2) - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 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"/> ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- 《AngularJS》--指令的相互调用
转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...
随机推荐
- Python_pip_02_利用pip安装模块(以安装pyperclip为例)
>任务:利用pip安装pyperclip模块 >前提 你已经在你的电脑里面安装啦Python2.7的Windows版本,并且已经配置了环境变量 >实现步骤 >>打开你的P ...
- JavaWeb 没用
Servlet的生命周期 初始化:Web容器加载servlet,调用innit(),只执行一次 处理业务: 请求到达时,运行service方法 并调用相应的doget或者dopost方法. 可执行多 ...
- PCL—点云分割(基于形态学) 低层次点云处理
博客转载自:http://www.cnblogs.com/ironstark/p/5017428.html 1.航空测量与点云的形态学 航空测量是对地形地貌进行测量的一种高效手段.生成地形三维形貌一直 ...
- 算法Sedgewick第四版-第1章基础-1.4 Analysis of Algorithms-003定理
1. 2. 3. 4. 5. 6.
- Luogu 3942 将军令
之前写那个(Luogu 2279) [HNOI2003]消防局的设立的时候暴力推了一个树形dp,然后就导致这个题不太会写. 贪心,先把树建出来,然后考虑按照结点深度排个序,每次取出还没有被覆盖掉的深度 ...
- ConcurrentHashMap的putIfAbsent
这个方法在key不存在的时候加入一个值,如果key存在就不放入,等价: if (!map.containsKey(key)) return map.put(key, value); else retu ...
- 友盟让用户数据动起来——给app增加运营
让用户数据动起来——给app增加运营 一.初识友盟 友盟大家都听说过,在给app集成友盟之前对友盟的认识没有那么深刻.用了友盟之后,才发现友盟很强大. 集成友盟能够获取那些数据呢? 用户的基本信息:比 ...
- PS2018学习笔记(03-18节)
3-认识主界面 # 主界面包括: 菜单栏.选项栏.工具栏.面板.图像编辑窗口(中间)和状态栏(底部): # 界面设置: 方法1:Ctrl+k:打开界面设置; 方法2:编辑-首选项-界面 # shift ...
- Python-OpenCV中的cv2.threshold
目录 cv2.threshold() 主要记录Python-OpenCV中的cv2,threshold()方法:官方文档 cv2.threshold() def threshold(src, th ...
- 【bzoj1951】: [Sdoi2010]古代猪文 数论-中国剩余定理-Lucas定理
[bzoj1951]: [Sdoi2010]古代猪文 因为999911659是个素数 欧拉定理得 然后指数上中国剩余定理 然后分别lucas定理就好了 注意G==P的时候的特判 /* http://w ...