-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnote.html
More file actions
337 lines (297 loc) · 23.5 KB
/
note.html
File metadata and controls
337 lines (297 loc) · 23.5 KB
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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<title>Angular2 select用法-设置默认值和事件 - CSDN博客</title>
<link href="http://csdnimg.cn/public/favicon.ico" rel="SHORTCUT ICON">
<script src="//csdnimg.cn/search/baidu_search-1.0.0.js?v=201802071056&autorun=true&install=true&keyword=angular2+select+%E9%BB%98%E8%AE%A4%E9%80%89%E4%B8%AD" type="text/javascript"></script>
</head>
<body>
<script id="toolbar-tpl-scriptId" prod="download" skin="black" src="http://c.csdnimg.cn/public/common/toolbar/js/content_toolbar.js" type="text/javascript" domain="http://blog.csdn.net/"></script>
<div class="container clearfix">
<main>
<div style="display:none;">
<img src="" onerror='setTimeout(function(){if(top!==self){window.top.location.href=window.location.href}if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com)$/.test(window.location.hostname)){window.location.href="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x77\x77\x77\x2e\x63\x73\x64\x6e\x2e\x6e\x65\x74"}},3000);'>
</div>
<article>
<h1 class="csdn_top">Angular2 select用法-设置默认值和事件</h1>
<div class="article_bar clearfix">
<div class="artical_tag">
<span class="original">
原创 </span>
<span class="time">2016年11月09日 22:06:55</span>
</div>
<ul class="article_tags clearfix csdn-tracking-statistics tracking-click" data-mod="popu_377" >
<li class="tit">标签：</li>
<!-- [startarticletags]-->
<li><a href="http://so.csdn.net/so/search/s.do?q=select&t=blog" target="_blank">select</a> <span>/</span></li>
<li><a href="http://so.csdn.net/so/search/s.do?q=angular2&t=blog" target="_blank">angular2</a> <span>/</span></li>
<!-- [endarticletags]-->
</ul>
<ul class="right_bar">
<li><button class="btn-noborder"><i class="icon iconfont icon-read"></i><span class="txt">15395</span></button></li>
<li class="edit">
<a class="btn-noborder" href="" >
<i class="icon iconfont icon-bianji"></i><span class="txt">编辑</span>
</a>
</li>
<li class="del">
<a class="btn-noborder" onclick="javascript:deleteArticle(fileName);return false;">
<i class="icon iconfont icon-shanchu"></i><span class="txt">删除</span>
</a>
</li>
</ul>
</div>
<div id="article_content" class="article_content csdn-tracking-statistics tracking-click" data-mod="popu_519" data-dsm="post">
<div class="markdown_views">
<p><strong>设置默认值：</strong> <br>
现在有三个学生小明，小红，小黑，对双向绑定的student设置你想要的select值就可以在下拉框默认选中 <br>
code1： <br>
设置”请选择”为默认项，只需要把变量student设置为‘’，即可默认到“请选择” <br>
方案1：</p>
<pre class="prettyprint"><code class=" hljs cs">TS:
students:<span class="hljs-keyword">string</span>[]=[<span class="hljs-string">'xiaoming'</span>,<span class="hljs-string">'xiaohong'</span>,<span class="hljs-string">'xiaohei'</span>];
student:<span class="hljs-keyword">string</span>=<span class="hljs-string">''</span>;
HTML:
<<span class="hljs-keyword">select</span> [(ngModel)]=<span class="hljs-string">"student"</span>>
<option <span class="hljs-keyword">value</span>=<span class="hljs-string">""</span>>请选择</option> <span class="hljs-comment">//此处用的是value，而不是[value]</span>
<option *ngFor=<span class="hljs-string">"let item of students"</span> [<span class="hljs-keyword">value</span>]=<span class="hljs-string">'item'</span>>{{item}}</option>
</<span class="hljs-keyword">select</span>></code></pre>
<p>方案2：</p>
<pre class="prettyprint"><code class=" hljs cs">TS:
students:<span class="hljs-keyword">string</span>[]=[<span class="hljs-string">''</span>,<span class="hljs-string">'xiaoming'</span>,<span class="hljs-string">'xiaohong'</span>,<span class="hljs-string">'xiaohei'</span>];
student:<span class="hljs-keyword">string</span>=<span class="hljs-string">''</span>;
HTML:
<<span class="hljs-keyword">select</span> [(ngModel)]=<span class="hljs-string">"student"</span>>
<option *ngFor=<span class="hljs-string">"let item of students"</span> [<span class="hljs-keyword">value</span>]=<span class="hljs-string">'item'</span>>{{item || <span class="hljs-string">'请选择'</span>}}</option>
</<span class="hljs-keyword">select</span>></code></pre>
<p>code2： <br>
当需要设置默认值到xiaoming时，只需要将变量student的初始值设为“xiaoming”</p>
<pre class="prettyprint"><code class=" hljs cs">TS:
students:<span class="hljs-keyword">string</span>[]=[<span class="hljs-string">'xiaoming'</span>,<span class="hljs-string">'xiaohong'</span>,<span class="hljs-string">'xiaohei'</span>];
student:<span class="hljs-keyword">string</span>=<span class="hljs-string">'xiaoming'</span>;
HTML:
<<span class="hljs-keyword">select</span> [(ngModel)]=<span class="hljs-string">"student"</span>>
<option *ngFor=<span class="hljs-string">"let item of students"</span> [<span class="hljs-keyword">value</span>]=<span class="hljs-string">'item'</span>>{{item}}</option>
</<span class="hljs-keyword">select</span>></code></pre>
<p><strong>绑定事件</strong> <br>
select下拉框主要通过ngModel和ngModelChange实现选择事件 <br>
如果你想要在select下拉框选中某一项时触发事件，可以将[(ngModel)]拆成ngModel和ngModelChange来实现</p>
<pre class="prettyprint"><code class=" hljs ocaml">TS:
students:<span class="hljs-built_in">string</span>[]=[<span class="hljs-string">'xiaoming'</span>,<span class="hljs-string">'xiaohong'</span>,<span class="hljs-string">'xiaohei'</span>];
student:<span class="hljs-built_in">string</span>=<span class="hljs-string">''</span>;
info:<span class="hljs-built_in">string</span>=<span class="hljs-string">''</span>;
setInfo(){
this.info=student;
}
HTML:
<select [ngModel]=<span class="hljs-string">"student"</span> (ngModelChange)=<span class="hljs-string">"student=$event;setInfo()"</span>>
<<span class="hljs-built_in">option</span> <span class="hljs-keyword">value</span>=<span class="hljs-string">""</span>>请选择</<span class="hljs-built_in">option</span>>
<<span class="hljs-built_in">option</span> *ngFor=<span class="hljs-string">"let item of students"</span> [<span class="hljs-keyword">value</span>]=<span class="hljs-string">'item'</span>>{{item}}</<span class="hljs-built_in">option</span>>
</select>
{{info}}</code></pre>
<p>在属性绑定中，一个值从模型中传到屏幕上的目标属性。 我们通过把名字括在方括号中来标记出目标属性， [] 。 这是一个 从模型到视图 的单向数据绑定。</p>
<p>在事件绑定中，值从屏幕上的目标属性传到模型中。 我们通过把名字括在圆括号中来标记出目标属性， () 。 这是一个 从视图到模型 的反向单向数据绑定。</p>
<p>在Angular2中[(x)] 的绑定目标时，会以x和xChange表示他的输入和输出属性。</p>
<p>代码中<code>student=$event</code> 原理如下ngModelChange是一个 Angular EventEmitter 类型的属性，当它触发时，它返回的是输入框的值</p>
<p><a href="https://angular.cn/docs/ts/latest/guide/template-syntax.html">点击观看更多关于ngModel的知识</a></p> </div>
<link rel="stylesheet" href="http://csdnimg.cn/release/phoenix/production/markdown_views-45c1f7b280.css" />
</div>
</article>
<div class="readall_box csdn-tracking-statistics tracking-click" data-mod="popu_376">
<div class="read_more_mask"></div>
<a class="btn btn-large btn-gray-fred read_more_btn" target="_self">阅读全文</a>
</div>
<div class="article_copyright">
版权声明：本文为博主原创文章，未经博主允许不得转载。 </div>
<ul class="article_collect clearfix csdn-tracking-statistics tracking-click" data-mod="popu_378">
<li class="tit">本文已收录于以下专栏：</li>
<!-- [startarticlecolumns]-->
<!-- [endarticlecolumns]-->
</ul>
<div class="comment_box clearfix" id="comments">
<div id="comment_form">
<div id="commentsbmitarear">
</div>
</div>
</div>
<div class="comment_li_outbox">
<div id="comment_list"></div>
</div>
<div class="more_comment">
<div id="comment_bar" class="trackgin-ad" data-mod="popu_385"></div>
</div>
<!-- <h3 class="recommend_tit" id="related">相关文章推荐</h3> -->
<div class="recommend_list clearfix" id="rasss">
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/erciyuan_nuonuo/article/details/53149135" target="_blank" strategy="BlogCommendFromBaidu_0">
<dd class="clearfix">
<h2 class="">Angular2 单选框用法</h2>
<div class="summary">
html中单选框用法如下，checked用来选中默认的单选项：Male
Female
如果使用[(ngModel)]绑定后，checked就不再生效，此时默认选中项与绑定的sex值相关,设置ngmod... </div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/A/E/B/3_erciyuan_nuonuo.jpg" alt="erciyuan_nuonuo" title="erciyuan_nuonuo"/></li>
<li class="user_name">erciyuan_nuonuo</li>
<li class="time">2016年11月13日 15:07</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>1110</span></li>
</ul>
</dd>
</a>
</dl>
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/after_you/article/details/72723528" target="_blank" strategy="BlogCommendFromBaidu_1">
<dd class="clearfix">
<h2 class="">angular中的select标签的使用</h2>
<div class="summary">
最近在工作遇到一个问题，项目是用angularjs做的。
项目有一个需求是需要编辑资料，资料中有一个地方是有下拉框的。学艺不精的在下，在开始想到的是直接将给div添加ng-model，HTM... </div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/6/8/9/3_after_you.jpg" alt="after_you" title="after_you"/></li>
<li class="user_name">after_you</li>
<li class="time">2017年05月25日 11:05</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>429</span></li>
</ul>
</dd>
</a>
</dl>
<dl class="">
<script>
(function() {
var s = "_" + Math.random().toString(36).slice(2);
document.write('<div id="' + s + '"></div>');
(window.slotbydup=window.slotbydup || []).push({
id: '4765209',
container: s,
size: '808,120',
display: 'inlay-fix'
});
})();
</script>
</dl>
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/linzhiqiang0316/article/details/52489668" target="_blank" strategy="BlogCommendFromBaidu_2">
<dd class="clearfix">
<h2 class="">AngularJS系列之select下拉选择第一个选项为空白的解决办法</h2>
<div class="summary">
今天给大家介绍一下AngularJS系列之select下拉选择第一个选项为空白的解决办法。
相信大家也经常遇到这种情况吧：在使用AngularJS中的select组件开发的时候，莫名其妙的第一个选项就... </div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/4/F/2/3_linzhiqiang0316.jpg" alt="linzhiqiang0316" title="linzhiqiang0316"/></li>
<li class="user_name">linzhiqiang0316</li>
<li class="time">2016年09月09日 18:08</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>14765</span></li>
</ul>
</dd>
</a>
</dl>
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/u012138137/article/details/50511732" target="_blank" strategy="BlogCommendFromBaidu_3">
<dd class="clearfix">
<h2 class="">angular select中ng-options使用</h2>
<div class="summary">
function selectCtrl($scope) {
$scope.selected = ''; $scope.model = [{
id: 10001,
... </div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/8/1/6/3_u012138137.jpg" alt="u012138137" title="u012138137"/></li>
<li class="user_name">u012138137</li>
<li class="time">2016年01月13日 16:39</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>6567</span></li>
</ul>
</dd>
</a>
</dl>
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/wgp15732622312/article/details/75210710" target="_blank" strategy="BlogCommendFromBaidu_4">
<dd class="clearfix">
<h2 class="">angular2-使用bootstrap-select插件</h2>
<div class="summary">
背景：站在巨人的肩膀上，在angular2的组件模板里用到了bootstrap-select插件，非常的爽。但是遇到了一个问题。直接进入组件页面时，bootstrap-select的插件显示完全没有问... </div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/7/5/A/3_wgp15732622312.jpg" alt="wgp15732622312" title="wgp15732622312"/></li>
<li class="user_name">wgp15732622312</li>
<li class="time">2017年07月16日 21:03</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>1094</span></li>
</ul>
</dd>
</a>
</dl>
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/feathercloudy/article/details/79022165" target="_blank" strategy="BlogCommendFromBaidu_5">
<dd class="clearfix">
<h2 class="">angularjs中设置select的选中项</h2>
<div class="summary">
最近用angularjs比较多，里面有很多自己的方法，都不咋会用，这篇只是个笔记，防止自己忘记
selectValue">
viewModel.bizModelList" value="{... </div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/C/0/6/3_feathercloudy.jpg" alt="feathercloudy" title="feathercloudy"/></li>
<li class="user_name">feathercloudy</li>
<li class="time">2018年01月10日 11:59</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>28</span></li>
</ul>
</dd>
</a>
</dl>
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/u012609847/article/details/43163437" target="_blank" strategy="BlogCommendFromBaidu_6">
<dd class="clearfix">
<h2 class="">angularJS扩展指令之-select2(整理)</h2>
<div class="summary">
angularJS扩展指令之-select2(整理) </div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/F/D/B/3_u012609847.jpg" alt="u012609847" title="u012609847"/></li>
<li class="user_name">u012609847</li>
<li class="time">2015年01月26日 21:49</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>6901</span></li>
</ul>
</dd>
</a>
</dl>
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/u010138825/article/details/51006619" target="_blank" strategy="BlogCommendFromBaidu_7">
<dd class="clearfix">
<h2 class="">select2选中默认值</h2>
<div class="summary">
$("#cus_type").select2("data",{"id":1,"text":"22"}); </div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/8/F/2/3_u010138825.jpg" alt="u010138825" title="u010138825"/></li>
<li class="user_name">u010138825</li>
<li class="time">2016年03月29日 15:53</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>5954</span></li>
</ul>
</dd>
</a>
</dl>
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/jiana227/article/details/51612825" target="_blank" strategy="BlogCommendFromBaidu_8">
<dd class="clearfix">
<h2 class="">angular select 默认选中值</h2>
<div class="summary">
</div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/0/8/E/3_jiana227.jpg" alt="jiana227" title="jiana227"/></li>
<li class="user_name">jiana227</li>
<li class="time">2016年06月08日 14:19</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>1643</span></li>
</ul>
</dd>
</a>
</dl>
<dl class="clearfix csdn-tracking-statistics recommend_article" data-mod="popu_387" data-poputype="feed" data-feed-show="false" data-dsm="post">
<a href="http://blog.csdn.net/erciyuan_nuonuo/article/details/53106644" target="_blank" strategy="searchFromBaidu_9">
<dd class="clearfix">
<h2 class="">Angular2 select用法-设置默认值和事件</h2>
<div class="summary">
angular2支持双向绑定，在使用select下拉框主要通过ngModel和ngModelChange实现选择事件比如现在有三个学生小明，小红，小黑，对双向绑定的student设置你想要的selec... </div>
<ul class="">
<li class="avatar_img"><img src="http://avatar.csdn.net/A/E/B/3_erciyuan_nuonuo.jpg" alt="erciyuan_nuonuo" title="erciyuan_nuonuo"/></li>
<li class="user_name">erciyuan_nuonuo</li>
<li class="time">2016年11月09日 22:06</li>
<li class="visited_num"><i class="icon iconfont icon-read"></i><span>15395</span></li>
</ul>
</dd>
</a>
</dl>
<!-- <script async="async" charset="utf-8" src="https://shared.ydstatic.com/js/yatdk/3.0.0/stream.js" data-notify="bannerMulti_notify" data-insert-nodes="yd_a_d_feed_1,yd_a_d_feed_13,yd_a_d_feed_18,yd_a_d_feed_23,yd_a_d_feed_28,yd_a_d_feed_33" data-id="8935aa488dd58452b9e5ee3b44f1212f" data-hide-ad-label="0" data-div-Style="width:100%;padding:16px 35px 16px 10px;" data-img-Style="float:right;width:120px;" data-tit-Style="font-size:20px;font-weight:bold;margin-bottom:10px;font-family: 'PingFang SC', 'Microsoft YaHei', SimHei, Arial, SimSun;" data-des-Style="width:700px;font-size:14px;font-family: 'PingFang SC', 'Microsoft YaHei', SimHei, Arial, SimSun;" > </script> -->
</div>
</main>