forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1025-js-08.html
233 lines (223 loc) · 9.87 KB
/
1025-js-08.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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!doctype html>
<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>
<style type="text/css">
h3 {
font-family: 'Microsoft Yahei';
}
p {
font-size: 30px !important;
letter-spacing: 2px;
line-height: 50px !important;
text-align: center;
}
h5 {
text-align: left;
}
B {
color: rgb(195, 255, 219);
font-size: 40px !important;
font-weight: 500 !important;
}
a {
color: #fff !important;
}
</style>
</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-task8】</h2>
<h3>angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？</h3>
<h4>分享人：关楠</h3>
</section>
<section>
<p style="text-align: center;">目录</p>
<p style="text-align: center;">1.背景介绍</p>
<p style="text-align: center;">2.知识剖析</p>
<p style="text-align: center;">3.常见问题</p>
<p style="text-align: center;">4.解决方案</p>
<p style="text-align: center;">5.编码实战</p>
<p style="text-align: center;">6.扩展思考</p>
<p style="text-align: center;">7.参考文献</p>
<p style="text-align: center;">8.更多讨论</p>
</section>
<!--1.背景介绍-->
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<img src="./img/1025-js-8/img.png">
</section>
<section>
<p>AngularJS 通过被称为"指令(directive)"的新属性来扩展 HTML。</p>
<p>AngularJS 有许多内置的指令来为应用添加功能</p>
<p>通俗点说就是 AngularJS 将指令与DOM绑定在一起，再扩展指令的行为，最后实现修改HTML的功能</p>
<p>AngularJS 的内置指令均有ng-前缀</p>
</section>
</section>
<!--2.知识剖析-->
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<section>
<B>2.1 常用属性之 ng-value</B>
</section>
<section>
<h3>ng-value</h3>
<h5>ng-value 指令用于设置 input 或 select 元素的 value 属性</h5>
<h5>ng-value 的格式：<xmp><element ng-value="expression"></element></xmp></h5>
<B>下面看几个例子</B>
</section>
<section>
<b>这里有几个结论：1.ng-value会赋值给value，并且优先于ng-model<br>2.ng-value不是双向绑定，不会因为value的值改变<br>可以把ng-value就当成一个可以用给input等元素的value赋值的属性</b>
</section>
<section>
<B>2.2 常用属性之 ng-if</B>
</section>
<section>
<h3>ng-if</h3>
<h5>ng-if 指令用于在表达式为 false 时移除 HTML 元素，在表达式为 true 时添加 HTML 元素</h5>
<h5>ng-if 的格式<xmp><element ng-if="expression"></element></xmp></h5>
<h5>这里区别于ng-show和ng-hide，ng-if会直接在DOM树中添加或者删除节点，而前面两个只会显示隐藏</h5>
<B>下面再看几个例子</B>
</section>
<section>
<B>2.3 常用属性之 ng-click</B>
</section>
<section>
<h3>ng-click</h3>
<h5>ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作</h5>
<h5>ng-click 的格式<xmp><element ng-click="expression"></element></xmp></h5>
<h5>这里可以参考js的onclick</h5>
<B>下面再再看几个例子</B>
</section>
<section>
<B>2.4 常用属性之 ng-options</B>
</section>
<section>
<h3>ng-options</h3>
<h5>ng-options 指令用于使用 options 填充 select 元素的选项</h5>
<h5>这里可以对比ng-repeat的方法</h5>
<B>下面再再再看几个例子</B>
</section>
<section>
<B>2.5 常用属性之 ng-class</B>
</section>
<section>
<h3>ng-class</h3>
<h5>ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类</h5>
<h5>ng-class 指令的值可以是字符串，对象，或一个数组</h5>
<B>下面再再再再看几个例子</B>
</section>
</section>
<!--3.常见问题-->
<section>
<h3>3.常见问题</h3>
</section>
<section>
<B>实例：ng-if会生成一个子作用域，在ng-if隐藏（不存在）时的作用域$scope在ng-if显示后，会搜索不到其子作用域，导致ng-model绑定不到ng-if新生成的子作用域内的值</B>
<br>
<B>非常见实例：uib-progressbar只能使用value并且可以使用表达式</B>
</section>
<!--4.解决方案-->
<section>
<h3>4.解决方案</h3>
<B>在大部分情况使用ng-show代替ng-if</B>
<B>或者可以使用ng-if但是同时需要将ng-model中的变量添加$parent来获取父级作用域</B>
</section>
<!--5.编码实战-->
<section>
<h3>5.编码实战</h3>
<p>这里看一下我在任务中的实例</p>
</section>
<!--6.拓展思考-->
<section>
<h3>6.拓展思考</h3>
</section>
<section>
<a href="http://www.jb51.net/article/99903.htm">1.什么情况下使用ng-if代替ng-show</a>
<br>
<a href="https://www.cnblogs.com/ys-ys/p/4940956.html">2.ng-click、ng-change、ng-dblclick、ng-checked该怎么选择</a>
</section>
<section>
<h3>7.参考文献</h3>
<a href="http://www.cnblogs.com/iceseal/p/4077417.html">正确使用ng-if和ng-show</a>
<br>
<a href="https://blog.csdn.net/qq_30638831/article/details/76418152?locationnum=2&fps=1">ng-model与ng-value的区别</a>
<br>
<a href="http://www.runoob.com/angularjs/angularjs-tutorial.html">菜鸟教程</a>
<br>
<a href="https://www.jianshu.com/p/e693b52d47fa">ng-class用法</a>
</section>
<section>
<h3>8.更多讨论</h3>
<p>讨论时间到，欢迎大家提问！</p>
</section>
<section>
<p style="text-align: center">感谢大家观看
<p style="text-align: center">
<small>BY : 关楠</small>
</section>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
</div>
</div>
<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>