Начало Каталог Помощ
Регистрация Вход
root
/
myBlogs_2
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
ИН на ревизия: b880cc39f8
Клонове Маркери
myBlogs_2
/
_book
/
angular
/
study_notes
/
01_built-in_instructions.html

01_built-in_instructions.html 46 KB
История Директен файл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985 
  1. 

  2. <!DOCTYPE HTML>
    3. 

  3. <html lang="" >
    4. 

  4.     <head>
    5. 

  5.         <meta charset="UTF-8">
    6. 

  6.         <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    7. 

  7.         <title>内置指令 · 代码收集</title>
    8. 

  8.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    9. 

  9.         <meta name="description" content="">
    10. 

  10.         <meta name="generator" content="GitBook 3.1.1">
    11. 

  11.         
    12. 

  12.         
    13. 

  13.         
    14. 

  14.     
    15. 

  15.     <link rel="stylesheet" href="../../gitbook/style.css">
    16. 

  16. 

  17.     
    18. 

  18.             
    19. 

  19.                 
    20. 

  20.                 <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search-pro/search.css">
    21. 

  21.                 
    22. 

  22.             
    23. 

  23.                 
    24. 

  24.                 <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
    25. 

  25.                 
    26. 

  26.             
    27. 

  27.         
    28. 

  28. 

  29.     
    30. 

  30. 

  31.     
    32. 

  32.         
    33. 

  33.     
    34. 

  34.         
    35. 

  35.     
    36. 

  36.         
    37. 

  37.     
    38. 

  38.         
    39. 

  39.     
    40. 

  40.         
    41. 

  41.     
    42. 

  42.         
    43. 

  43.     
    44. 

  44. 

  45.         
    46. 

  46.     
    47. 

  47.     
    48. 

  48.     <meta name="HandheldFriendly" content="true"/>
    49. 

  49.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    50. 

  50.     <meta name="apple-mobile-web-app-capable" content="yes">
    51. 

  51.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
    52. 

  52.     <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    53. 

  53.     <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
    54. 

  54. 

  55. 

  56.     
    57. 

  57.     <link rel="next" href="from/" />
    58. 

  58.     
    59. 

  59.     
    60. 

  60.     <link rel="prev" href="0_depend.html" />
    61. 

  61.     
    62. 

  62. 

  63.     </head>
    64. 

  64.     <body>
    65. 

  65.         
    66. 

  66. <div class="gb-page-wrapper">
    67. 

  67.     <header class="gb-page-header">
    68. 

  68.         <div class="container">
    69. 

  69.         
    70. 

  70.             
    71. 

  71. <div id="book-search-input" role="search">
    72. 

  72.     <input type="text" placeholder="Type to search" />
    73. 

  73. </div>
    74. 

  74. 

  75. 

  76.             <a href="../.." class="logo">
    77. 

  77.                 <img src="../../gitbook/images/logo/128.png">
    78. 

  78.                 <h1>代码收集</h1>
    79. 

  79.             </a>
    80. 

  80. 

  81.             
    82. 

  82. 

  83.             
    84. 

  84. <a href="https://github.com/seamong/myBlogs/blob/doc/angular/study_notes/01_built-in_instructions.md" target="_blank" class="btn btn-link pull-right hidden-xs">
    85. 

  85.     <i class="octicon octicon-mark-github"></i> 在GitHub编辑本页
    86. 

  86. </a>
    87. 

  87. <a href="../../faq.md" class="btn btn-link pull-right hidden-xs">
    88. 

  88.     F.A.Q
    89. 

  89. </a>
    90. 

  90. <a href="https://github.com/seamong/myBlogs/README.md" target="_blank" class="btn btn-link pull-right hidden-xs">
    91. 

  91.     当前版本0.0.1
    92. 

  92. </a>
    93. 

  93. 

  94.         
    95. 

  95.         </div>
    96. 

  96.     </header>
    97. 

  97. 

  98.     <div class="gb-page-body">
    99. 

  99.         <div class="gb-page-inner">
    100. 

  100.             <div class="container">
    101. 

  101.                 <div class="row">
    102. 

  102.                     <div class="col-md-3">
    103. 

  103.                         
    104. 

  104. 

  105. 

  106. 

  107.     
    108. 

  108.     <div class="panel panel-default">
    109. 

  109.         
    110. 

  110.         <div class="panel-heading">
    111. 

  111.             <h3 class="panel-title">介绍</h3>
    112. 

  112.         </div>
    113. 

  113.         
    114. 

  114. 

  115.         <div class="list-group">
    116. 

  116.             
    117. 

  117.     
    118. 

  118.         
    119. 

  119.         <a href="../../" class="list-group-item ">
    120. 

  120.         
    121. 

  121. 

  122.             
    123. 

  123. 

  124.             
    125. 

  125. 

  126.             关于本文档
    127. 

  127. 

  128.         
    129. 

  129.         </a>
    130. 

  130.         
    131. 

  131. 

  132.         
    133. 

  133.     
    134. 

  134. 

  135.         </div>
    136. 

  136.     </div>
    137. 

  137.     
    138. 

  138.     <div class="panel panel-default">
    139. 

  139.         
    140. 

  140.         <div class="panel-heading">
    141. 

  141.             <h3 class="panel-title">JavaScript</h3>
    142. 

  142.         </div>
    143. 

  143.         
    144. 

  144. 

  145.         <div class="list-group">
    146. 

  146.             
    147. 

  147.     
    148. 

  148.         
    149. 

  149.         <a href="../../JavaScript/principle/" class="list-group-item ">
    150. 

  150.         
    151. 

  151. 

  152.             
    153. 

  153. 

  154.             
    155. 

  155.             <i class="octicon octicon-chevron-right"></i>
    156. 

  156.             
    157. 

  157. 

  158.             原理解析
    159. 

  159. 

  160.         
    161. 

  161.         </a>
    162. 

  162.         
    163. 

  163. 

  164.         
    165. 

  165.     
    166. 

  166.         
    167. 

  167.         <a href="../../JavaScript/cases/" class="list-group-item ">
    168. 

  168.         
    169. 

  169. 

  170.             
    171. 

  171. 

  172.             
    173. 

  173.             <i class="octicon octicon-chevron-right"></i>
    174. 

  174.             
    175. 

  175. 

  176.             案例解析
    177. 

  177. 

  178.         
    179. 

  179.         </a>
    180. 

  180.         
    181. 

  181. 

  182.         
    183. 

  183.     
    184. 

  184. 

  185.         </div>
    186. 

  186.     </div>
    187. 

  187.     
    188. 

  188.     <div class="panel panel-default">
    189. 

  189.         
    190. 

  190.         <div class="panel-heading">
    191. 

  191.             <h3 class="panel-title">angular</h3>
    192. 

  192.         </div>
    193. 

  193.         
    194. 

  194. 

  195.         <div class="list-group">
    196. 

  196.             
    197. 

  197.     
    198. 

  198.         
    199. 

  199.         <a href="./" class="list-group-item ">
    200. 

  200.         
    201. 

  201. 

  202.             
    203. 

  203. 

  204.             
    205. 

  205.             <i class="octicon octicon-chevron-down"></i>
    206. 

  206.             
    207. 

  207. 

  208.             Study notes
    209. 

  209. 

  210.         
    211. 

  211.         </a>
    212. 

  212.         
    213. 

  213. 

  214.         
    215. 

  215.         
    216. 

  216.     
    217. 

  217.         
    218. 

  218.         <a href="0_depend.html" class="list-group-item ">
    219. 

  219.         
    220. 

  220. 

  221.             
    222. 

  222.             <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
    223. 

  223.             
    224. 

  224. 

  225.             
    226. 

  226. 

  227.             项目依赖
    228. 

  228. 

  229.         
    230. 

  230.         </a>
    231. 

  231.         
    232. 

  232. 

  233.         
    234. 

  234.     
    235. 

  235.         
    236. 

  236.         <a href="01_built-in_instructions.html" class="list-group-item active">
    237. 

  237.         
    238. 

  238. 

  239.             
    240. 

  240.             <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
    241. 

  241.             
    242. 

  242. 

  243.             
    244. 

  244. 

  245.             内置指令
    246. 

  246. 

  247.         
    248. 

  248.         </a>
    249. 

  249.         
    250. 

  250. 

  251.         
    252. 

  252.     
    253. 

  253.         
    254. 

  254.         <a href="from/" class="list-group-item ">
    255. 

  255.         
    256. 

  256. 

  257.             
    258. 

  258.             <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
    259. 

  259.             
    260. 

  260. 

  261.             
    262. 

  262.             <i class="octicon octicon-chevron-right"></i>
    263. 

  263.             
    264. 

  264. 

  265.             表单
    266. 

  266. 

  267.         
    268. 

  268.         </a>
    269. 

  269.         
    270. 

  270. 

  271.         
    272. 

  272.     
    273. 

  273. 

  274.         
    275. 

  275.     
    276. 

  276.         
    277. 

  277.         <a href="../ng.html" class="list-group-item ">
    278. 

  278.         
    279. 

  279. 

  280.             
    281. 

  281. 

  282.             
    283. 

  283. 

  284.             ng
    285. 

  285. 

  286.         
    287. 

  287.         </a>
    288. 

  288.         
    289. 

  289. 

  290.         
    291. 

  291.     
    292. 

  292. 

  293.         </div>
    294. 

  294.     </div>
    295. 

  295.     
    296. 

  296.     <div class="panel panel-default">
    297. 

  297.         
    298. 

  298.         <div class="panel-heading">
    299. 

  299.             <h3 class="panel-title">css</h3>
    300. 

  300.         </div>
    301. 

  301.         
    302. 

  302. 

  303.         <div class="list-group">
    304. 

  304.             
    305. 

  305.     
    306. 

  306.         
    307. 

  307.         <a href="../../css/principle/" class="list-group-item ">
    308. 

  308.         
    309. 

  309. 

  310.             
    311. 

  311. 

  312.             
    313. 

  313. 

  314.             原理解析
    315. 

  315. 

  316.         
    317. 

  317.         </a>
    318. 

  318.         
    319. 

  319. 

  320.         
    321. 

  321.     
    322. 

  322.         
    323. 

  323.         <a href="../../css/cases/" class="list-group-item ">
    324. 

  324.         
    325. 

  325. 

  326.             
    327. 

  327. 

  328.             
    329. 

  329.             <i class="octicon octicon-chevron-right"></i>
    330. 

  330.             
    331. 

  331. 

  332.             案例收集
    333. 

  333. 

  334.         
    335. 

  335.         </a>
    336. 

  336.         
    337. 

  337. 

  338.         
    339. 

  339.     
    340. 

  340. 

  341.         </div>
    342. 

  342.     </div>
    343. 

  343.     
    344. 

  344.     <div class="panel panel-default">
    345. 

  345.         
    346. 

  346.         <div class="panel-heading">
    347. 

  347.             <h3 class="panel-title">vue</h3>
    348. 

  348.         </div>
    349. 

  349.         
    350. 

  350. 

  351.         <div class="list-group">
    352. 

  352.             
    353. 

  353.     
    354. 

  354.         
    355. 

  355.         <a href="../../vue/components/" class="list-group-item ">
    356. 

  356.         
    357. 

  357. 

  358.             
    359. 

  359. 

  360.             
    361. 

  361.             <i class="octicon octicon-chevron-right"></i>
    362. 

  362.             
    363. 

  363. 

  364.             components
    365. 

  365. 

  366.         
    367. 

  367.         </a>
    368. 

  368.         
    369. 

  369. 

  370.         
    371. 

  371.     
    372. 

  372.         
    373. 

  373.         <a href="../../vue/router/" class="list-group-item ">
    374. 

  374.         
    375. 

  375. 

  376.             
    377. 

  377. 

  378.             
    379. 

  379.             <i class="octicon octicon-chevron-right"></i>
    380. 

  380.             
    381. 

  381. 

  382.             router
    383. 

  383. 

  384.         
    385. 

  385.         </a>
    386. 

  386.         
    387. 

  387. 

  388.         
    389. 

  389.     
    390. 

  390.         
    391. 

  391.         <a href="../../vue/vuex/" class="list-group-item ">
    392. 

  392.         
    393. 

  393. 

  394.             
    395. 

  395. 

  396.             
    397. 

  397. 

  398.             VUE
    399. 

  399. 

  400.         
    401. 

  401.         </a>
    402. 

  402.         
    403. 

  403. 

  404.         
    405. 

  405.     
    406. 

  406. 

  407.         </div>
    408. 

  408.     </div>
    409. 

  409.     
    410. 

  410.     <div class="panel panel-default">
    411. 

  411.         
    412. 

  412.         <div class="panel-heading">
    413. 

  413.             <h3 class="panel-title">ubuntu</h3>
    414. 

  414.         </div>
    415. 

  415.         
    416. 

  416. 

  417.         <div class="list-group">
    418. 

  418.             
    419. 

  419.     
    420. 

  420.         
    421. 

  421.         <a href="../../ubuntu/serves/" class="list-group-item ">
    422. 

  422.         
    423. 

  423. 

  424.             
    425. 

  425. 

  426.             
    427. 

  427.             <i class="octicon octicon-chevron-right"></i>
    428. 

  428.             
    429. 

  429. 

  430.             服务器生存指南
    431. 

  431. 

  432.         
    433. 

  433.         </a>
    434. 

  434.         
    435. 

  435. 

  436.         
    437. 

  437.     
    438. 

  438.         
    439. 

  439.         <a href="../../ubuntu/instruction.html" class="list-group-item ">
    440. 

  440.         
    441. 

  441. 

  442.             
    443. 

  443. 

  444.             
    445. 

  445. 

  446.             常用指令
    447. 

  447. 

  448.         
    449. 

  449.         </a>
    450. 

  450.         
    451. 

  451. 

  452.         
    453. 

  453.     
    454. 

  454. 

  455.         </div>
    456. 

  456.     </div>
    457. 

  457.     
    458. 

  458.     <div class="panel panel-default">
    459. 

  459.         
    460. 

  460.         <div class="panel-heading">
    461. 

  461.             <h3 class="panel-title">GIT</h3>
    462. 

  462.         </div>
    463. 

  463.         
    464. 

  464. 

  465.         <div class="list-group">
    466. 

  466.             
    467. 

  467.     
    468. 

  468.         
    469. 

  469.         <a href="../../git/git.html" class="list-group-item ">
    470. 

  470.         
    471. 

  471. 

  472.             
    473. 

  473. 

  474.             
    475. 

  475. 

  476.             git 命令
    477. 

  477. 

  478.         
    479. 

  479.         </a>
    480. 

  480.         
    481. 

  481. 

  482.         
    483. 

  483.     
    484. 

  484. 

  485.         </div>
    486. 

  486.     </div>
    487. 

  487.     
    488. 

  488.     <div class="panel panel-default">
    489. 

  489.         
    490. 

  490. 

  491.         <div class="list-group">
    492. 

  492.             
    493. 

  493.     
    494. 

  494.         
    495. 

  495.         <a href="../../other/faq.html" class="list-group-item ">
    496. 

  496.         
    497. 

  497. 

  498.             
    499. 

  499. 

  500.             
    501. 

  501. 

  502.             FAQ
    503. 

  503. 

  504.         
    505. 

  505.         </a>
    506. 

  506.         
    507. 

  507. 

  508.         
    509. 

  509.     
    510. 

  510.         
    511. 

  511.         <a href="../../other/examples.html" class="list-group-item ">
    512. 

  512.         
    513. 

  513. 

  514.             
    515. 

  515. 

  516.             
    517. 

  517. 

  518.             Examples
    519. 

  519. 

  520.         
    521. 

  521.         </a>
    522. 

  522.         
    523. 

  523. 

  524.         
    525. 

  525.     
    526. 

  526. 

  527.         </div>
    528. 

  528.     </div>
    529. 

  529.     
    530. 

  530. 

  531. 

  532. 

  533.                     </div>
    534. 

  534.                     <div class="col-md-9">
    535. 

  535.                         
    536. 

  536. <div id="book-search-results">
    537. 

  537.     <div class="search-noresults">
    538. 

  538.     
    539. 

  539.                             
    540. 

  540. 

  541.                             <div class="gb-markdown book-page-inner">
    542. 

  542.                                 <h3 id="ngif">ngIf</h3>
    543. 

  543. <blockquote>
    544. 

  544. <p><strong> &#x5982;&#x679C;&#x4F60;&#x5E0C;&#x671B;&#x6839;&#x636E;&#x4E00;&#x4E2A;&#x6761;&#x4EF6;&#x6765;&#x51B3;&#x5B9A;&#x663E;&#x793A;&#x6216;&#x9690;&#x85CF;&#x4E00;&#x4E2A;&#x5143;&#x7D20;,&#x53EF;&#x4EE5;&#x4F7F;&#x7528; ngIf &#x6307;&#x4EE4;&#x3002;&#x8FD9;&#x4E2A;&#x6761;&#x4EF6;&#x662F;&#x7531;&#x4F60;&#x4F20;&#x7ED9;&#x6307;&#x4EE4;&#x7684;&#x8868;&#x8FBE;&#x5F0F;&#x7684;&#x7ED3;&#x679C;&#x51B3;&#x5B9A;&#x7684;&#x3002;<br>
    545. 

  545. </strong> &#x5982;&#x679C;&#x8868;&#x8FBE;&#x5F0F;&#x7684;&#x7ED3;&#x679C;&#x8FD4;&#x56DE;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x5047;&#x503C;,&#x90A3;&#x4E48;&#x5143;&#x7D20;&#x4F1A;&#x4ECE;DOM&#x4E0A;&#x88AB;&#x79FB;&#x9664;&#x3002;</p>
    546. 

  546. </blockquote>
    547. 

  547. <pre><code class="lang-html"># &#x4F8B;&#x5B50;&#xFF1A;
    548. 

  548. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span> = &quot;<span class="hljs-attr">false</span>&quot; &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    549. 

  549. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span> = &quot;<span class="hljs-attr">a</span> &gt;</span> b&quot; &gt;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    550. 

  550. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span> = &quot;<span class="hljs-attr">str</span> =<span class="hljs-string">=</span> &apos;<span class="hljs-attr">yes</span>&apos;&quot; &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    551. 

  551. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span> = &quot;<span class="hljs-attr">myFunc</span>()&quot; &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    552. 

  552. </code></pre>
    553. 

  553. <h3 id="ngswitch">ngSwitch</h3>
    554. 

  554. <blockquote>
    555. 

  555. <p>** &#x5B9E;&#x9645;&#x4F5C;&#x7528;&#x540C;&#x7B49;&#x4E8E; switch&#x8BED;&#x53E5;</p>
    556. 

  556. </blockquote>
    557. 

  557. <pre><code class="lang-html"># &#x901A;&#x8FC7;2&#x7EC4;&#x5B9E;&#x4F8B;&#x8FDB;&#x884C;&#x6BD4;&#x8F83;
    558. 

  558. ## ngIf
    559. 

  559.   &#x6839;&#x636E;&#x540C;&#x503C;&#x4E0D;&#x540C;&#x6761;&#x4EF6;&#x6E32;&#x67D3;&#x4E0D;&#x540C;&#x5143;&#x7D20;
    560. 

  560.     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span>
    561. 

  561.       <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">&quot;myVar == &apos;A&apos;&quot;</span>&gt;</span>Var is A<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    562. 

  562.       <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">&quot;myVar == &apos;B&apos;&quot;</span>&gt;</span>Var is B<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    563. 

  563.       <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">&quot;myVar != &apos;A&apos; &amp;&amp; myVar != &apos;B&apos;&quot;</span>&gt;</span>Var is something else<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    564. 

  564.     <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    565. 

  565. 

  566.   &#x589E;&#x52A0;&#x6761;&#x4EF6;&#x4E0E;&#x503C;
    567. 

  567.   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span>
    568. 

  568.     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">&quot;myVar == &apos;A&apos;&quot;</span>&gt;</span>Var is A<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    569. 

  569.     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">&quot;myVar == &apos;B&apos;&quot;</span>&gt;</span>Var is B<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    570. 

  570.     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">&quot;myVar == &apos;C&apos;&quot;</span>&gt;</span>Var is C<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    571. 

  571.     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">&quot;myVar != &apos;A&apos; &amp;&amp; myVar != &apos;B&apos; &amp;&amp; myVar != &apos;C&apos;&quot;</span>&gt;</span>Var is something else<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    572. 

  572.   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    573. 

  573. ### ngSwitch
    574. 

  574. &#x6539;&#x53D8;&#x4E0A;&#x8FF0;&#x60C5;&#x51B5;&#xFF0C;&#x5B98;&#x65B9;&#x52A0;&#x5165; ngSwitch
    575. 

  575.   &#x4F7F;&#x7528; ngSwitchCase &#x6307;&#x4EE4;&#x63CF;&#x8FF0;&#x5DF2;&#x77E5;&#x7ED3;&#x679C;
    576. 

  576.   &#x4F7F;&#x7528; ngSwitchDefault &#x6307;&#x4EE4;&#x5904;&#x7406;&#x6240;&#x6709;&#x5176;&#x4ED6;&#x672A;&#x77E5;&#x60C5;&#x51B5;
    577. 

  577.     &#x91CD;&#x5199;&#x5B9E;&#x4F8B;
    578. 

  578.       <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span> [<span class="hljs-attr">ngSwitch</span>]=<span class="hljs-string">&quot;myVar&quot;</span>&gt;</span>
    579. 

  579.         <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;&apos;A&apos;&quot;</span>&gt;</span>Var is A<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    580. 

  580.         <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;&apos;B&apos;&quot;</span>&gt;</span>Var is B<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    581. 

  581.         <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngSwitchDefault</span>&gt;</span>Var is something else<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    582. 

  582.       <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    583. 

  583.     &#x6DFB;&#x52A0;&#x6761;&#x4EF6;&#xFF1A; ngSwitchDefault &#x5143;&#x7D20;&#x662F;&#x53EF;&#x9009;&#x7684;&#x3002;&#x5982;&#x679C;&#x6211;&#x4EEC;&#x4E0D;&#x7528;&#x5B83;,&#x90A3;&#x4E48;&#x5F53; myVar &#x6CA1;&#x6709;&#x5339;&#x914D;&#x5230;&#x4EFB;&#x4F55;&#x671F;&#x671B;&#x7684;&#x503C;
    584. 

  584.           &#x65F6;&#x5C31;&#x4E0D;&#x4F1A;&#x6E32;&#x67D3;&#x4EFB;&#x4F55;&#x4E1C;&#x897F;&#x3002;
    585. 

  585.       <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span> [<span class="hljs-attr">ngSwitch</span>]=<span class="hljs-string">&quot;myVar&quot;</span>&gt;</span>
    586. 

  586.         <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;&apos;A&apos;&quot;</span>&gt;</span>Var is A<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    587. 

  587.         <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;&apos;B&apos;&quot;</span>&gt;</span>Var is B<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    588. 

  588.         <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;&apos;C&apos;&quot;</span>&gt;</span>Var is C<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    589. 

  589.         <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngSwitchDefault</span>&gt;</span>Var is something else<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    590. 

  590.       <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    591. 

  591.   &#x4E3A;&#x4E0D;&#x540C;&#x7684;&#x5143;&#x7D20;&#x58F0;&#x660E;&#x540C;&#x6837;&#x7684; *ngSwitchCase &#x503C;
    592. 

  592.   &#x5728;&#x4E0B;&#x9762;&#x7684;&#x4F8B;&#x5B50;&#x4E2D;,&#x5F53; choice &#x7684;&#x503C;&#x662F; 2 &#x7684;&#x65F6;&#x5019;,&#x7B2C;2&#x4E2A;&#x548C;&#x7B2C;5&#x4E2A; li &#x90FD;&#x4F1A;&#x88AB;&#x6E32;&#x67D3;&#x3002;
    593. 

  593.     <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui horizontal divider header&quot;</span>&gt;</span>
    594. 

  594.       Current choice is {{ choice }}
    595. 

  595.     <span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    596. 

  596.     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui raised segment&quot;</span>&gt;</span>
    597. 

  597.       <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> [<span class="hljs-attr">ngSwitch</span>]=<span class="hljs-string">&quot;choice&quot;</span>&gt;</span>
    598. 

  598.         <span class="hljs-tag">&lt;<span class="hljs-name">li</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>First choice<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    599. 

  599.         <span class="hljs-tag">&lt;<span class="hljs-name">li</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>Second choice<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    600. 

  600.         <span class="hljs-tag">&lt;<span class="hljs-name">li</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>Third choice<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    601. 

  601.         <span class="hljs-tag">&lt;<span class="hljs-name">li</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;4&quot;</span>&gt;</span>Fourth choice<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    602. 

  602.         <span class="hljs-tag">&lt;<span class="hljs-name">li</span> *<span class="hljs-attr">ngSwitchCase</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>Second choice, again<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    603. 

  603.         <span class="hljs-tag">&lt;<span class="hljs-name">li</span> *<span class="hljs-attr">ngSwitchDefault</span>&gt;</span>Default choice<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    604. 

  604.       <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
    605. 

  605.     <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    606. 

  606.     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-top: 20px;&quot;</span>&gt;</span>
    607. 

  607.       <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui primary button&quot;</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;nextChoice()&quot;</span>&gt;</span>
    608. 

  608.       Next choice
    609. 

  609.       <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    610. 

  610.     <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    611. 

  611. </code></pre>
    612. 

  612. <h3 id="ngstyle">ngStyle</h3>
    613. 

  613. <blockquote>
    614. 

  614. <p>&#x7B2C;&#x4E00;&#x79CD;&#x7528;&#x6CD5;&#xFF1A;&#x4F7F;&#x7528; ngStyle &#x6307;&#x4EE4;,&#x53EF;&#x4EE5;&#x901A;&#x8FC7;Angular&#x8868;&#x8FBE;&#x5F0F;&#x7ED9;&#x7279;&#x5B9A;&#x7684;DOM&#x5143;&#x7D20;&#x8BBE;&#x5B9A;CSS&#x5C5E;&#x6027;&#x3002;
    615. 

  615.   &#x8BE5;&#x6307;&#x4EE4;&#x6700;&#x7B80;&#x5355;&#x7684;&#x7528;&#x6CD5;&#x5C31;&#x662F; [style.<cssproperty>]=&quot;value&quot; &#x7684;&#x5F62;&#x5F0F;,</cssproperty></p>
    616. 

  616. </blockquote>
    617. 

  617. <pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> [<span class="hljs-attr">style.background-color</span>]=<span class="hljs-string">&quot;&apos;yellow&apos;&quot;</span>&gt;</span>
    618. 

  618.   Uses fixed yellow background
    619. 

  619. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    620. 

  620. </code></pre>
    621. 

  621. <blockquote>
    622. 

  622. <p>&#x7B2C;&#x4E8C;&#x79CD;&#x7528;&#x6CD5;&#xFF1A;&#x8BBE;&#x7F6E;&#x56FA;&#x5B9A;&#x503C;&#x7684;&#x65B9;&#x5F0F;&#x5C31;&#x662F;&#x4F7F;&#x7528; ngStyle &#x5C5E;&#x6027;,&#x4F7F;&#x7528;&#x952E;&#x503C;&#x5BF9;&#x6765;&#x8BBE;&#x7F6E;&#x6BCF;&#x4E2A;&#x5C5E;&#x6027;</p>
    623. 

  623. </blockquote>
    624. 

  624. <pre><code class="lang-html"><span class="hljs-comment">&lt;!--&#x8FDE;&#x5B57;&#x7B26;&#x662F;&#x4E0D;&#x5141;&#x8BB8;&#x51FA;&#x73B0;&#x5728;&#x5BF9;&#x8C61;&#x7684;&#x952E;&#x503C;&#x5BF9;&#x4E2D;&#x7684;&#xFF0C;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x5F15;&#x53F7;--&gt;</span>
    625. 

  625. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> [<span class="hljs-attr">ngStyle</span>]=<span class="hljs-string">&quot;{color: &apos;white&apos;, &apos;background-color&apos;: &apos;blue&apos;}&quot;</span>&gt;</span>
    626. 

  626. Uses fixed white text on blue background
    627. 

  627. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    628. 

  628. </code></pre>
    629. 

  629. <blockquote>
    630. 

  630. <p>&#x7B2C;&#x4E09;&#x79CD;&#x7528;&#x6CD5;&#xFF1A;&#x8FD9;&#x4E2A;&#x624D;&#x662F;ngStyle&#x7684;&#x51FA;&#x5F69;&#x7684;&#x5730;&#x65B9;</p>
    631. 

  631. </blockquote>
    632. 

  632. <pre><code class="lang-html"><span class="hljs-comment">&lt;!--&#x5728;component&#x4E2D;&#x58F0;&#x660E;&#x53D8;&#x91CF;&#xFF0C;&#x5B9A;&#x4E49;apply&#x51FD;&#x6570;&#xFF0C;&#x5C06;&#x8F93;&#x5165;&#x6846;&#x4E2D;&#x5BF9;&#x5E94;&#x7684;&#x503C;&#xFF0C;&#x901A;&#x8FC7;ngStyle&#x7ED1;&#x5B9A;&#x5230;&#x989C;&#x8272;&#x4E0E;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x7684;&#x5C5E;&#x6027;&#x4E0A;&#x53BB;--&gt;</span>
    633. 

  633. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui input&quot;</span>&gt;</span>
    634. 

  634.   <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;color&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{color}}&quot;</span> #<span class="hljs-attr">colorinput</span>&gt;</span>
    635. 

  635. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    636. 

  636. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui input&quot;</span>&gt;</span>
    637. 

  637.   <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;fontSize&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{fontSize}}&quot;</span> #<span class="hljs-attr">fontinput</span>&gt;</span>
    638. 

  638. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    639. 

  639. <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui primary button&quot;</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;apply(colorinput.value, fontinput.value)&quot;</span>&gt;</span>
    640. 

  640.   Apply setting
    641. 

  641. <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    642. 

  642. <span class="hljs-comment">&lt;!--&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;2&#x79CD;&#x65B9;&#x5F0F;--&gt;</span>
    643. 

  643. <span class="hljs-tag">&lt;<span class="hljs-name">span</span> [<span class="hljs-attr">ngStyle</span>]=<span class="hljs-string">&quot;{color: color,&apos;font-size&apos;: fontSize + &apos;em&apos;}&quot;</span>&gt;</span>
    644. 

  644. {{ color }} text
    645. 

  645. <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
    646. 

  646. 

  647. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> [<span class="hljs-attr">style.background-color</span>]=<span class="hljs-string">&quot;color&quot;</span>
    648. 

  648.      [<span class="hljs-attr">style.font-size.em</span>]=<span class="hljs-string">&quot;fontSize&quot;</span>
    649. 

  649.      <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: white;&quot;</span>&gt;</span>
    650. 

  650.   {{ color }} background
    651. 

  651. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    652. 

  652. </code></pre>
    653. 

  653. <pre><code class="lang-typescript"><span class="hljs-comment">// &#x5B9A;&#x4E49;&#x6570;&#x636E;&#x7C7B;&#x578B;&#xFF0C;&#x5B9A;&#x4E49;&#x89E6;&#x53D1;&#x4E8B;&#x4EF6;</span>
    654. 

  654. <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> InventoryAppComponent <span class="hljs-keyword">implements</span> OnInit {
    655. 

  655.   color:<span class="hljs-built_in">string</span>;
    656. 

  656.   fontSize:<span class="hljs-built_in">number</span>;
    657. 

  657. 

  658.   apply(color: <span class="hljs-built_in">string</span>, fontSize: <span class="hljs-built_in">number</span>) {
    659. 

  659.     <span class="hljs-keyword">this</span>.color = color;
    660. 

  660.     <span class="hljs-keyword">this</span>.fontSize = fontSize;
    661. 

  661.   }
    662. 

  662.   <span class="hljs-keyword">constructor</span>() {
    663. 

  663.   }
    664. 

  664.   ngOnInit() {
    665. 

  665.   }
    666. 

  666. }
    667. 

  667. </code></pre>
    668. 

  668. <h3 id="ngclass">ngClass</h3>
    669. 

  669. <blockquote>
    670. 

  670. <p>ngClass &#x6307;&#x4EE4;&#x5728;HTML&#x6A21;&#x677F;&#x4E2D;&#x7528; ngClass &#x5C5E;&#x6027;&#x6765;&#x8868;&#x793A;,&#x8BA9;&#x4F60;&#x80FD;&#x52A8;&#x6001;&#x8BBE;&#x7F6E;&#x548C;&#x6539;&#x53D8;&#x4E00;&#x4E2A;&#x7ED9;&#x5B9A;DOM&#x5143;&#x7D20;&#x7684;CSS&#x7C7B;&#x3002;
    671. 

  671. &#x4EE5;&#x4E0B;&#x662F;&#x6700;&#x7B80;&#x5355;&#x7684;&#x7528;&#x6CD5;&#x3002;</p>
    672. 

  672. </blockquote>
    673. 

  673. <pre><code class="lang-scss"><span class="hljs-selector-class">.bordered</span> {
    674. 

  674.   <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> dashed black;
    675. 

  675.   <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#eee</span>;
    676. 

  676. }
    677. 

  677. </code></pre>
    678. 

  678. <pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> [<span class="hljs-attr">ngClass</span>]=<span class="hljs-string">&quot;{bordered: false}&quot;</span>&gt;</span>This is never bordered<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    679. 

  679. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> [<span class="hljs-attr">ngClass</span>]=<span class="hljs-string">&quot;{bordered: true}&quot;</span>&gt;</span>This is always bordered<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    680. 

  680. </code></pre>
    681. 

  681. <blockquote>
    682. 

  682. <p>&#x52A8;&#x6001;&#x6DFB;&#x52A0;class</p>
    683. 

  683. </blockquote>
    684. 

  684. <pre><code class="lang-html"><span class="hljs-comment">&lt;!-- *&apos;`&apos;&#x7B26;&#x53F7;&#x662F;&#x4E3A;&#x4E86;&#x907F;&#x514D;gitbook&#x6E32;&#x67D3;&#x9875;&#x9762;&#x51FA;&#x73B0;&#x6545;&#x969C;* --&gt;</span>
    685. 

  685. <span class="hljs-comment">&lt;!-- &#x901A;&#x8FC7;ngClass&#x7ED1;&#x5B9A;&#x6570;&#x636E;&#x5230;&#x5404;&#x5143;&#x7D20;&#x7684;class&#x4E0A; --&gt;</span>
    686. 

  686. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> [<span class="hljs-attr">ngClass</span>]=<span class="hljs-string">&quot;classesObj&quot;</span>&gt;</span>
    687. 

  687.   Using object var. Border `{{ classesObj.bordered ? &quot;ON&quot; : &quot;OFF&quot; }}`
    688. 

  688. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    689. 

  689. 

  690. <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span>
    691. 

  691. <span class="hljs-comment">&lt;!-- &#x6839;&#x636E;&#x6761;&#x4EF6;&#x7ED1;&#x5B9A;&#x6570;&#x636E; --&gt;</span>
    692. 

  692. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> [<span class="hljs-attr">ngClass</span>]=<span class="hljs-string">&quot;{bordered: isBordered}&quot;</span>&gt;</span>
    693. 

  693.   Using object literal. Border `{{ isBordered ? &quot;ON&quot; : &quot;OFF&quot; }}`
    694. 

  694. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    695. 

  695. <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span>
    696. 

  696. <span class="hljs-comment">&lt;!-- &#x5B9A;&#x4E49;&#x6570;&#x7EC4;&#x7ED1;&#x5B9A;class --&gt;</span>
    697. 

  697. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;base&quot;</span> [<span class="hljs-attr">ngClass</span>]=<span class="hljs-string">&quot;[&apos;blue&apos;, &apos;round&apos;]&quot;</span>&gt;</span>
    698. 

  698.   This will always have a blue background and
    699. 

  699.   round corners
    700. 

  700. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    701. 

  701. <span class="hljs-comment">&lt;!-- &#x52A8;&#x6001;&#x5B9A;&#x4E49;&#x6570;&#x7EC4;&#x7ED1;&#x5B9A;&#x7C7B; --&gt;</span>
    702. 

  702. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;base&quot;</span> [<span class="hljs-attr">ngClass</span>]=<span class="hljs-string">&quot;classList&quot;</span>&gt;</span>
    703. 

  703.   <span class="hljs-comment">&lt;!-- &#x5224;&#x65AD;&#x7C7B;&#x662F;&#x5426;&#x5B58;&#x5728; --&gt;</span>
    704. 

  704.   This is { { classList.indexOf(&apos;blue&apos;) &gt; -1 ? &quot;&quot; : &quot;NOT&quot;}} blue
    705. 

  705.   and { { classList.indexOf(&apos;round&apos;) &gt; 1 ? &quot;&quot; :&quot;NOT&quot; }} round
    706. 

  706. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    707. 

  707. </code></pre>
    708. 

  708. <pre><code class="lang-typescript"><span class="hljs-comment">// &#x5B9A;&#x4E49;&#x6570;&#x636E;&#xFF0C;&#x5E76;&#x8D4B;&#x503C;</span>
    709. 

  709. <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> InventoryAppComponent <span class="hljs-keyword">implements</span> OnInit {
    710. 

  710.   isBordered: <span class="hljs-built_in">boolean</span>;
    711. 

  711.   classesObj: <span class="hljs-built_in">Object</span>;
    712. 

  712.   classList: <span class="hljs-built_in">string</span>[];
    713. 

  713.   <span class="hljs-keyword">constructor</span>() {
    714. 

  714.     <span class="hljs-keyword">this</span>.isBordered = <span class="hljs-literal">true</span>;
    715. 

  715.     <span class="hljs-keyword">this</span>.classesObj = {
    716. 

  716.       bordered : <span class="hljs-string">&quot;bordered&quot;</span>
    717. 

  717.     };
    718. 

  718.     <span class="hljs-keyword">this</span>.classList = [<span class="hljs-string">&apos;blue&apos;</span>, <span class="hljs-string">&apos;round&apos;</span>];
    719. 

  719.     <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>)
    720. 

  720.   }
    721. 

  721.   ngOnInit() {
    722. 

  722.   }
    723. 

  723. 

  724. }
    725. 

  725. </code></pre>
    726. 

  726. <h3 id="ngfor">ngFor</h3>
    727. 

  727. <blockquote>
    728. 

  728. <p>&#x8FD9;&#x4E2A;&#x6307;&#x4EE4;&#x7684;&#x4EFB;&#x52A1;&#x662F;&#x91CD;&#x590D;&#x4E00;&#x4E2A;&#x7ED9;&#x5B9A;&#x7684;DOM&#x5143;&#x7D20; (&#x6216;&#x4E00;&#x7EC4;DOM&#x5143;&#x7D20;),&#x6BCF;&#x6B21;&#x91CD;&#x590D;&#x90FD;&#x4F1A;&#x4ECE;&#x6570;&#x7EC4;&#x4E2D;&#x53D6;
    729. 

  729. &#x4E00;&#x4E2A;&#x4E0D;&#x540C;&#x7684;&#x503C;&#x3002;<br>
    730. 

  730. &#x5B83;&#x7684;&#x8BED;&#x6CD5;&#x662F; *ngFor=&quot;let item of items&quot; &#x3002;</p>
    731. 

  731. </blockquote>
    732. 

  732. <p><code>&#x7B80;&#x5316;&#x7248;</code></p>
    733. 

  733. <pre><code class="lang-typescript">cities: <span class="hljs-built_in">string</span>[];
    734. 

  734. <span class="hljs-keyword">constructor</span>() {
    735. 

  735.   <span class="hljs-keyword">this</span>.cities = [<span class="hljs-string">&apos;Miami&apos;</span>, <span class="hljs-string">&apos;Sao Paulo&apos;</span>, <span class="hljs-string">&apos;New York&apos;</span>];
    736. 

  736. }
    737. 

  737. </code></pre>
    738. 

  738. <pre><code class="lang-HTML"><span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui horizontal divider header&quot;</span>&gt;</span>
    739. 

  739.   Simple list of strings
    740. 

  740. <span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    741. 

  741. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui list&quot;</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">&quot;let c of cities&quot;</span>&gt;</span>
    742. 

  742.   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span>{{ c }}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    743. 

  743. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    744. 

  744. <span class="hljs-comment">&lt;!-- &#x8F93;&#x51FA; --&gt;</span>
    745. 

  745. Miami
    746. 

  746. Sao Paulo
    747. 

  747. New York
    748. 

  748. </code></pre>
    749. 

  749. <p><code>&#x8FDB;&#x9636;&#x7248;</code></p>
    750. 

  750. <pre><code class="lang-typescript">people: <span class="hljs-built_in">Object</span>[];
    751. 

  751. <span class="hljs-keyword">constructor</span>() {
    752. 

  752.   <span class="hljs-keyword">this</span>.people = [
    753. 

  753.     { name: <span class="hljs-string">&apos;Anderson&apos;</span>, age: <span class="hljs-number">35</span>, city: <span class="hljs-string">&apos;Sao Paulo&apos;</span> },
    754. 

  754.     { name: <span class="hljs-string">&apos;John&apos;</span>, age: <span class="hljs-number">12</span>, city: <span class="hljs-string">&apos;Miami&apos;</span> },
    755. 

  755.     { name: <span class="hljs-string">&apos;Peter&apos;</span>, age: <span class="hljs-number">22</span>, city: <span class="hljs-string">&apos;New York&apos;</span> }
    756. 

  756.   ];
    757. 

  757. }
    758. 

  758. </code></pre>
    759. 

  759. <pre><code class="lang-HTML"><span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>table<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    760. 

  760. <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui horizontal divider header&quot;</span>&gt;</span>
    761. 

  761.   List of objects
    762. 

  762. <span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    763. 

  763. <span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui celled table&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">cellspacing</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">cellpadding</span>=<span class="hljs-string">&quot;0&quot;</span>&gt;</span>
    764. 

  764.   <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span>
    765. 

  765.     <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
    766. 

  766.       <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
    767. 

  767.       <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Age<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
    768. 

  768.       <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>City<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
    769. 

  769.     <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
    770. 

  770.   <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span>
    771. 

  771.   <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">&quot;let p of people&quot;</span>&gt;</span>
    772. 

  772.     <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{{ p.name }}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
    773. 

  773.     <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{{ p.age }}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
    774. 

  774.     <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{{ p.city }}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
    775. 

  775.   <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
    776. 

  776. <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
    777. 

  777. </code></pre>
    778. 

  778. <p><code>&#x8F93;&#x51FA;</code></p>
    779. 

  779. <table>
    780. 

  780. <thead>
    781. 

  781. <tr>
    782. 

  782. <th style="text-align:center">Name</th>
    783. 

  783. <th style="text-align:center">Age</th>
    784. 

  784. <th style="text-align:center">City</th>
    785. 

  785. </tr>
    786. 

  786. </thead>
    787. 

  787. <tbody>
    788. 

  788. <tr>
    789. 

  789. <td style="text-align:center">Anderson</td>
    790. 

  790. <td style="text-align:center">35</td>
    791. 

  791. <td style="text-align:center">Sao Paulo</td>
    792. 

  792. </tr>
    793. 

  793. <tr>
    794. 

  794. <td style="text-align:center">John</td>
    795. 

  795. <td style="text-align:center">12</td>
    796. 

  796. <td style="text-align:center">Miami</td>
    797. 

  797. </tr>
    798. 

  798. <tr>
    799. 

  799. <td style="text-align:center">Peter</td>
    800. 

  800. <td style="text-align:center">22</td>
    801. 

  801. <td style="text-align:center">New York</td>
    802. 

  802. </tr>
    803. 

  803. </tbody>
    804. 

  804. </table>
    805. 

  805. <p><code>&#x5D4C;&#x5957;&#x6570;&#x7EC4;</code></p>
    806. 

  806. <pre><code class="lang-HTML"><span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui horizontal divider header&quot;</span>&gt;</span>
    807. 

  807.   Nested data
    808. 

  808. <span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    809. 

  809. <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">&quot;let item of peopleByCity&quot;</span>&gt;</span>
    810. 

  810.   <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui header&quot;</span>&gt;</span>{{ item.city }}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
    811. 

  811.   <span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui celled table&quot;</span>&gt;</span>
    812. 

  812.     <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span>
    813. 

  813.       <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
    814. 

  814.         <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
    815. 

  815.         <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Age<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
    816. 

  816.       <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
    817. 

  817.     <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span>
    818. 

  818.     <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">&quot;let p of item.people&quot;</span>&gt;</span>
    819. 

  819.       <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{{ p.name }}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
    820. 

  820.       <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{{ p.age }}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
    821. 

  821.     <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
    822. 

  822.   <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
    823. 

  823. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    824. 

  824. </code></pre>
    825. 

  825. <pre><code class="lang-typescript">peopleByCity: <span class="hljs-built_in">Object</span>;
    826. 

  826. <span class="hljs-keyword">constructor</span>() {
    827. 

  827.   <span class="hljs-keyword">this</span>.peopleByCity = [
    828. 

  828.     {
    829. 

  829.       city: <span class="hljs-string">&apos;Miami&apos;</span>,
    830. 

  830.       people: [
    831. 

  831.         { name: <span class="hljs-string">&apos;John&apos;</span>, age: <span class="hljs-number">12</span> },
    832. 

  832.         { name: <span class="hljs-string">&apos;Angel&apos;</span>, age: <span class="hljs-number">22</span> }
    833. 

  833.       ]
    834. 

  834.     },
    835. 

  835.     {
    836. 

  836.       city: <span class="hljs-string">&apos;Sao Paulo&apos;</span>,
    837. 

  837.       people: [
    838. 

  838.         { name: <span class="hljs-string">&apos;Anderson&apos;</span>, age: <span class="hljs-number">35</span> },
    839. 

  839.         { name: <span class="hljs-string">&apos;Felipe&apos;</span>, age: <span class="hljs-number">36</span> }
    840. 

  840.       ]
    841. 

  841.     }
    842. 

  842.   ];
    843. 

  843. }
    844. 

  844. </code></pre>
    845. 

  845. <p><code>&#x8F93;&#x51FA; Miami</code></p>
    846. 

  846. <table>
    847. 

  847. <thead>
    848. 

  848. <tr>
    849. 

  849. <th style="text-align:center">Name</th>
    850. 

  850. <th style="text-align:center">Age</th>
    851. 

  851. </tr>
    852. 

  852. </thead>
    853. 

  853. <tbody>
    854. 

  854. <tr>
    855. 

  855. <td style="text-align:center">John</td>
    856. 

  856. <td style="text-align:center">12</td>
    857. 

  857. </tr>
    858. 

  858. <tr>
    859. 

  859. <td style="text-align:center">Angel</td>
    860. 

  860. <td style="text-align:center">22</td>
    861. 

  861. </tr>
    862. 

  862. </tbody>
    863. 

  863. </table>
    864. 

  864. <p><code>&#x8F93;&#x51FA; Sao Paulo</code></p>
    865. 

  865. <table>
    866. 

  866. <thead>
    867. 

  867. <tr>
    868. 

  868. <th style="text-align:center">Name</th>
    869. 

  869. <th style="text-align:center">Age</th>
    870. 

  870. </tr>
    871. 

  871. </thead>
    872. 

  872. <tbody>
    873. 

  873. <tr>
    874. 

  874. <td style="text-align:center">Anderson</td>
    875. 

  875. <td style="text-align:center">35</td>
    876. 

  876. </tr>
    877. 

  877. <tr>
    878. 

  878. <td style="text-align:center">Felipe</td>
    879. 

  879. <td style="text-align:center">36</td>
    880. 

  880. </tr>
    881. 

  881. </tbody>
    882. 

  882. </table>
    883. 

  883. <p><code>&#x83B7;&#x53D6;&#x7D22;&#x5F15;</code></p>
    884. 

  884. <pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ui list&quot;</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">&quot;let c of cities; let num = index&quot;</span>&gt;</span>
    885. 

  885.   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span>{{ num+1 }} - {{ c }}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    886. 

  886. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    887. 

  887. <span class="hljs-comment">&lt;!-- &#x8F93;&#x51FA; --&gt;</span>
    888. 

  888. 1-Miami
    889. 

  889. 2-Sao Paulo
    890. 

  890. 3-New York
    891. 

  891. </code></pre>
    892. 

  892. <h3 id="ngnonbindable">ngNonBindable</h3>
    893. 

  893. <blockquote>
    894. 

  894. <p>&#x5F53;&#x6211;&#x4EEC;&#x60F3;&#x544A;&#x8BC9;Angular&#x4E0D;&#x8981;&#x7F16;&#x8BD1;&#x6216;&#x8005;&#x7ED1;&#x5B9A;&#x9875;&#x9762;&#x4E2D;&#x7684;&#x67D0;&#x4E2A;&#x7279;&#x6B8A;&#x90E8;&#x5206;&#x65F6;,&#x8981;&#x4F7F;&#x7528; ngNodBindable&#x6307;&#x4EE4;&#x3002;</p>
    895. 

  895. </blockquote>
    896. 

  896. <pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ngNonBindableDome&quot;</span>&gt;</span>
    897. 

  897.   <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;borderd&quot;</span>&gt;</span>{{content}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
    898. 

  898.   <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pre&quot;</span> <span class="hljs-attr">ngNonBindable</span>&gt;</span>
    899. 

  899.     &amp;larr;This is what {{ content }} rendered
    900. 

  900.   <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
    901. 

  901. <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    902. 

  902. &#x8F93;&#x51FA;
    903. 

  903. &#x6587;&#x7AE0; &#x2190;This is what {{ content }} rendered
    904. 

  904. </code></pre>
    905. 

  905. 

  906.                             </div>
    907. 

  907.                             
    908. 

  908. <hr>
    909. 

  909. <div class="btn-group btn-group-justified">
    910. 

  910.     
    911. 

  911.     <a class="btn" href="0_depend.html"><b>上一页:</b> 项目依赖</a>
    912. 

  912.     
    913. 

  913.     
    914. 

  914.     <a class="btn" href="from/"><b>下一页:</b> 表单</a>
    915. 

  915.     
    916. 

  916. </div>
    917. 

  917. 

  918.                         
    919. 

  919.     </div>
    920. 

  920.     <div class="search-results">
    921. 

  921.         <div class="has-results">
    922. 

  922.             
    923. 

  923.             <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
    924. 

  924.             <ul class="search-results-list"></ul>
    925. 

  925.             
    926. 

  926.         </div>
    927. 

  927.         <div class="no-results">
    928. 

  928.             
    929. 

  929.             <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
    930. 

  930.             
    931. 

  931.         </div>
    932. 

  932.     </div>
    933. 

  933. </div>
    934. 

  934. 

  935.                     </div>
    936. 

  936.                 </div>
    937. 

  937.             </div>
    938. 

  938.         </div>
    939. 

  939.     </div>
    940. 

  940. 

  941.     <footer class="gb-page-footer">
    942. 

  942.         <div class="container">
    943. 

  943.             <ul class="menu">
    944. 

  944.                 <li class="pull-right">
    945. 

  945.                     <span class="service-info">Copyright GitBook 2018</span>
    946. 

  946.                 </li>
    947. 

  947.                 <li>
    948. 

  948.                     <a href="#">Return to the top</a>
    949. 

  949.                 </li>
    950. 

  950.                 <li>
    951. 

  951.                     <a href="#">Updated May 30th 18</a>
    952. 

  952.                 </li>
    953. 

  953.             </ul>
    954. 

  954.         </div>
    955. 

  955.     </footer>
    956. 

  956. </div>
    957. 

  957. 

  958. <script src="../../gitbook/gitbook.js"></script>
    959. 

  959. 

  960.     
    961. 

  961.     <script src="../../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
    962. 

  962.     
    963. 

  963. 

  964.     
    965. 

  965.     <script src="../../gitbook/gitbook-plugin-search-pro/search.js"></script>
    966. 

  966.     
    967. 

  967. 

  968.     
    969. 

  969.     <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
    970. 

  970.     
    971. 

  971. 

  972.     
    973. 

  973.     <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
    974. 

  974.     
    975. 

  975. 

  976. <script>
    977. 

  977. (function() {
    978. 

  978.     gitbook.page.hasChanged({"page":{"title":"内置指令","level":"3.1.2","depth":2,"next":{"title":"表单","level":"3.1.3","depth":2,"path":"angular/study_notes/from/README.md","ref":"angular/study_notes/from/README.md","articles":[{"title":"模板案例","level":"3.1.3.1","depth":3,"path":"angular/study_notes/from/0_template_case.md","ref":"angular/study_notes/from/0_template_case.md","articles":[]},{"title":"formControl","level":"3.1.3.2","depth":3,"path":"angular/study_notes/from/01_formControl.md","ref":"angular/study_notes/from/01_formControl.md","articles":[]},{"title":"directives_源码解析","level":"3.1.3.3","depth":3,"path":"angular/study_notes/from/02_directives.md","ref":"angular/study_notes/from/02_directives.md","articles":[]},{"title":"ngModel","level":"3.1.3.4","depth":3,"path":"angular/study_notes/from/03_ng_model.md","ref":"angular/study_notes/from/03_ng_model.md","articles":[]},{"title":"表单验证&自定义验证器","level":"3.1.3.5","depth":3,"path":"angular/study_notes/from/04_Form-Validation_&_Custom-Validator.md","ref":"angular/study_notes/from/04_Form-Validation_&_Custom-Validator.md","articles":[]},{"title":"监听表单数据变化","level":"3.1.3.6","depth":3,"path":"angular/study_notes/from/05_Listen_to_form_data_changes.md","ref":"angular/study_notes/from/05_Listen_to_form_data_changes.md","articles":[]},{"title":"问题收集","level":"3.1.3.7","depth":3,"path":"angular/study_notes/from/06_Problem_collection.md","ref":"angular/study_notes/from/06_Problem_collection.md","articles":[]}]},"previous":{"title":"项目依赖","level":"3.1.1","depth":2,"path":"angular/study_notes/0_depend.md","ref":"angular/study_notes/0_depend.md","articles":[]},"dir":"ltr"},"config":{"plugins":["theme-official@2.1.1","-sharing","-fontsettings","sitemap","-search","search-pro"],"root":"./docs/","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"sitemap":{"hostname":"https://blog.honghaitao.net/"},"search-pro":{"cutWordLib":"nodejieba","defineWord":["小需求","基础建设"]},"highlight":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"theme-official":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.1"},"title":"代码收集","gitbook":"3.1.1"},"file":{"path":"angular/study_notes/01_built-in_instructions.md","mtime":"2018-05-30T08:23:34.368Z","type":"markdown"},"gitbook":{"version":"3.1.1","time":"2018-05-30T08:55:08.693Z"},"basePath":"../..","book":{"language":""}});
    979. 

  979. })();
    980. 

  980. </script>
    981. 

  981. 

  982.         
    983. 

  983.     </body>
    984. 

  984. </html>
    985. 

  985.