-
Notifications
You must be signed in to change notification settings - Fork 69
/
Copy path1015-js-8.html
205 lines (187 loc) · 10.4 KB
/
1015-js-8.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<img src="./img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank" />
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>【js-08】</h2>
<h4>ANGULAR JS常用指令NG-IF、NG-CLASS、NG-OPTION、NG-VALUE、NG-CLICK是如何使用的？</h4>
<p>分享人：吴昊杰</p>
</section>
<section>
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
指令是一个Dom元素上的标签(和元素上的属性, CSS类样式一样，属于这个Dom元素)， 它告诉AngualrJS的HTML编译器，去附加一个行为到这个Dom元素上去， 这个行为可以改变这个Dom元素，或者这个Dom元素的子元素。 AngularJS通过被称为
指令 的新属性来扩展HTML。 AngularJS通过内置的指令来为应用添加功能。 AngularJS内置指令是扩展的HTML属性，带有前缀ng-。
</section>
</section>
<section>
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<p>ng-if:</p>
<p>ng-if指令用于在表达式为false时移除HTML元素。 如果ng-if语句执行的结果为true，会添加HTML元素，并显示。</p>
<p>ng-if: 指令不同于ng-hide/ng-show,ng-hide/ng-show是隐藏元素,设置元素的display为none,而ng-if是从DOM中移除元素。</p>
<p>ng-hide: 指令在表达式为true时隐藏指定的HTML元素。</p>
<p>ng-show: 指令在表达式为true时显示指定的HTML元素。</p>
</section>
<section>
<p>ng-class：</p>
<p>ng-class指令用于给HTML元素动态绑定一个或多个CSS类。 ng-class指令的值可以是字符串，对象，或一个数组。</p>
<p>如果是字符串，多个类名使用空格分隔。 如果是对象，需要使用key-value对，key为你想要添加的类名，value是一个布尔值。</p>
<p>只有在value为true时类才会被添加。 如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象</p>
</section>
<section>
<p>ng-option：</p>
<p>ng-options指令用于使用options填充select元素的选项。 ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。</p>
<p>ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。</p>
<p>但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。</p>
</section>
<section>
<p>ng-value：</p>
<p>ng-value指令用于设置input或select元素的value属性。 </p>
<p>和value相比，它的值可以是表达式，所以相比之下可以实现更多需求。</p>
<p>比如当需要使用ng-repeat来动态生成input[]的时候，ngValue是很有用处的。</p>
</section>
<section>
<p>ng-click：</p>
<p>ng-click指令告诉了AngularJS HTML元素被点击后需要执行的操作。 </p>
<p>如果是使用ng-click来实现函数的执行的话，还可以进行传参。</p>
<p>一个ng-click可以触发多个操作， 先执行function1后执行function2。</p>
</section>
</section>
<section>
<section>
<h3>3.常见问题</h3>
</section>
<section>
<h3>ng-option表达式的写法</h3>
</section>
</section>
<section>
<section>
<h3>4.解决方案</h3>
</section>
<section>
<p>1、ng-option表达式的写法 ng-options的值可以是一个内涵表达式， 其实这只是一种有趣的说法，简单来说就是它可以接收一个数组或者对象， 并对它们进行循环，将内部的内容提供给select标签内部的选项。</p>
<p>它可以是以下两种形式。</p>
<p>1、数组作为数据源 用数组中的值做标签。 用数组中的值作为选中的标签。用数组中的值做标签组。 用数组中的值作为选中的标签组。 </p>
<p>2、对象作为数据源 用对象的键-值（key-value）做标签。用对象的键-值作为选中的标签。用对象的键-值作为标签组。 用对象的键-值作为选中的标签组。</p>
</section>
</section>
<section>
<section>
<h3>5.代码实战</h3>
</section>
<section>
<h3>demo</h3>
</section>
</section>
<section>
<section>
<h3>6.拓展思考</h3>
</section>
<section>
<p>用angularJS的ng-model绑定到select上，会自动增加一个value为空的option,这是为什么？</p>
</section>
<section>
<p>原因：</p>
<p>ng-model没有初始化导致的， 如果ng-model所绑定的变量的值在ng-options绑定的value里面有， 下拉选框中就不会有空白的一项，选中别的数据项以后消失；</p>
<p> 如果ng-model所绑定的变量的值不在ng-options绑定的value里面，下拉选框中就不会有空白一项,并且只有当ng-options绑定的value里有对应 的text为空行时，这个空行才会一直存在于下拉选项里。</p>
</section>
<section>
<p>解决办法</p>
<p>将select中的一个option设置为空，就可以防止因添加ng-model自动添加空option的问题 </p>
</section>
</section>
<section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
<p style="text-align: left;">
<a href="http://www.runoob.com/angularjs/angularjs-directives.html">参考一:菜鸟教程-Angular指令篇</a>
</p>
</section>
</section>
<section>
<h3>8.更多讨论</h3>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
<small>BY : 吴昊杰</small>
</p>
</section>
</div>
</div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: '../plugin/markdown/marked.js' },
{ src: '../plugin/markdown/markdown.js' },
{ src: '../plugin/notes/notes.js', async: true },
{ src: '../plugin/highlight/highlight.js', async: true, callback: function () { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>