Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
root
/
myBlogs_3
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Мод: fe84a26f29
Салаанууд Тагууд
myBlogs_3
/
_book
/
angular
/
study_notes
/
01_built-in_instructions.html

01_built-in_instructions.html 48 KB
Түүх Анхны өгөгдөл

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081 
  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. 

  455.         <a href="../../ubuntu/software/" class="list-group-item ">
    456. 

  456.         
    457. 

  457. 

  458.             
    459. 

  459. 

  460.             
    461. 

  461. 

  462.             常用软件安装
    463. 

  463. 

  464.         
    465. 

  465.         </a>
    466. 

  466.         
    467. 

  467. 

  468.         
    469. 

  469.     
    470. 

  470. 

  471.         </div>
    472. 

  472.     </div>
    473. 

  473.     
    474. 

  474.     <div class="panel panel-default">
    475. 

  475.         
    476. 

  476.         <div class="panel-heading">
    477. 

  477.             <h3 class="panel-title">GIT</h3>
    478. 

  478.         </div>
    479. 

  479.         
    480. 

  480. 

  481.         <div class="list-group">
    482. 

  482.             
    483. 

  483.     
    484. 

  484.         
    485. 

  485.         <a href="../../git/git.html" class="list-group-item ">
    486. 

  486.         
    487. 

  487. 

  488.             
    489. 

  489. 

  490.             
    491. 

  491. 

  492.             git 命令
    493. 

  493. 

  494.         
    495. 

  495.         </a>
    496. 

  496.         
    497. 

  497. 

  498.         
    499. 

  499.     
    500. 

  500.         
    501. 

  501.         <a href="../../git/push.html" class="list-group-item ">
    502. 

  502.         
    503. 

  503. 

  504.             
    505. 

  505. 

  506.             
    507. 

  507. 

  508.             git~push
    509. 

  509. 

  510.         
    511. 

  511.         </a>
    512. 

  512.         
    513. 

  513. 

  514.         
    515. 

  515.     
    516. 

  516.         
    517. 

  517.         <a href="../../git/faq.html" class="list-group-item ">
    518. 

  518.         
    519. 

  519. 

  520.             
    521. 

  521. 

  522.             
    523. 

  523. 

  524.             git~F.A.Q
    525. 

  525. 

  526.         
    527. 

  527.         </a>
    528. 

  528.         
    529. 

  529. 

  530.         
    531. 

  531.     
    532. 

  532. 

  533.         </div>
    534. 

  534.     </div>
    535. 

  535.     
    536. 

  536.     <div class="panel panel-default">
    537. 

  537.         
    538. 

  538.         <div class="panel-heading">
    539. 

  539.             <h3 class="panel-title">NODE&NPM</h3>
    540. 

  540.         </div>
    541. 

  541.         
    542. 

  542. 

  543.         <div class="list-group">
    544. 

  544.             
    545. 

  545.     
    546. 

  546.         
    547. 

  547.         <a href="../../node/0.html" class="list-group-item ">
    548. 

  548.         
    549. 

  549. 

  550.             
    551. 

  551. 

  552.             
    553. 

  553.             <i class="octicon octicon-chevron-right"></i>
    554. 

  554.             
    555. 

  555. 

  556.             node
    557. 

  557. 

  558.         
    559. 

  559.         </a>
    560. 

  560.         
    561. 

  561. 

  562.         
    563. 

  563.     
    564. 

  564.         
    565. 

  565.         <a href="../../node/npm/0.html" class="list-group-item ">
    566. 

  566.         
    567. 

  567. 

  568.             
    569. 

  569. 

  570.             
    571. 

  571. 

  572.             npm
    573. 

  573. 

  574.         
    575. 

  575.         </a>
    576. 

  576.         
    577. 

  577. 

  578.         
    579. 

  579.     
    580. 

  580. 

  581.         </div>
    582. 

  582.     </div>
    583. 

  583.     
    584. 

  584.     <div class="panel panel-default">
    585. 

  585.         
    586. 

  586. 

  587.         <div class="list-group">
    588. 

  588.             
    589. 

  589.     
    590. 

  590.         
    591. 

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

  592.         
    593. 

  593. 

  594.             
    595. 

  595. 

  596.             
    597. 

  597. 

  598.             FAQ
    599. 

  599. 

  600.         
    601. 

  601.         </a>
    602. 

  602.         
    603. 

  603. 

  604.         
    605. 

  605.     
    606. 

  606.         
    607. 

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

  608.         
    609. 

  609. 

  610.             
    611. 

  611. 

  612.             
    613. 

  613. 

  614.             Examples
    615. 

  615. 

  616.         
    617. 

  617.         </a>
    618. 

  618.         
    619. 

  619. 

  620.         
    621. 

  621.     
    622. 

  622. 

  623.         </div>
    624. 

  624.     </div>
    625. 

  625.     
    626. 

  626. 

  627. 

  628. 

  629.                     </div>
    630. 

  630.                     <div class="col-md-9">
    631. 

  631.                         
    632. 

  632. <div id="book-search-results">
    633. 

  633.     <div class="search-noresults">
    634. 

  634.     
    635. 

  635.                             
    636. 

  636. 

  637.                             <div class="gb-markdown book-page-inner">
    638. 

  638.                                 <h3 id="ngif">ngIf</h3>
    639. 

  639. <blockquote>
    640. 

  640. <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>
    641. 

  641. </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>
    642. 

  642. </blockquote>
    643. 

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

  644. <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>
    645. 

  645. <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>
    646. 

  646. <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>
    647. 

  647. <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>
    648. 

  648. </code></pre>
    649. 

  649. <h3 id="ngswitch">ngSwitch</h3>
    650. 

  650. <blockquote>
    651. 

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

  652. </blockquote>
    653. 

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

  654. ## ngIf
    655. 

  655.   &#x6839;&#x636E;&#x540C;&#x503C;&#x4E0D;&#x540C;&#x6761;&#x4EF6;&#x6E32;&#x67D3;&#x4E0D;&#x540C;&#x5143;&#x7D20;
    656. 

  656.     <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>
    657. 

  657.       <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>
    658. 

  658.       <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>
    659. 

  659.       <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>
    660. 

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

  661. 

  662.   &#x589E;&#x52A0;&#x6761;&#x4EF6;&#x4E0E;&#x503C;
    663. 

  663.   <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>
    664. 

  664.     <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>
    665. 

  665.     <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>
    666. 

  666.     <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>
    667. 

  667.     <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>
    668. 

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

  669. ### ngSwitch
    670. 

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

  671.   &#x4F7F;&#x7528; ngSwitchCase &#x6307;&#x4EE4;&#x63CF;&#x8FF0;&#x5DF2;&#x77E5;&#x7ED3;&#x679C;
    672. 

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

  673.     &#x91CD;&#x5199;&#x5B9E;&#x4F8B;
    674. 

  674.       <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>
    675. 

  675.         <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>
    676. 

  676.         <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>
    677. 

  677.         <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>
    678. 

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

  679.     &#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;
    680. 

  680.           &#x65F6;&#x5C31;&#x4E0D;&#x4F1A;&#x6E32;&#x67D3;&#x4EFB;&#x4F55;&#x4E1C;&#x897F;&#x3002;
    681. 

  681.       <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>
    682. 

  682.         <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>
    683. 

  683.         <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>
    684. 

  684.         <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>
    685. 

  685.         <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>
    686. 

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

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

  688.   &#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;
    689. 

  689.     <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>
    690. 

  690.       Current choice is {{ choice }}
    691. 

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

  692.     <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>
    693. 

  693.       <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>
    694. 

  694.         <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>
    695. 

  695.         <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>
    696. 

  696.         <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>
    697. 

  697.         <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>
    698. 

  698.         <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>
    699. 

  699.         <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>
    700. 

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

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

  702.     <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>
    703. 

  703.       <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>
    704. 

  704.       Next choice
    705. 

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

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

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

  708. <h3 id="ngstyle">ngStyle</h3>
    709. 

  709. <blockquote>
    710. 

  710. <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;
    711. 

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

  712. </blockquote>
    713. 

  713. <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>
    714. 

  714.   Uses fixed yellow background
    715. 

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

  716. </code></pre>
    717. 

  717. <blockquote>
    718. 

  718. <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>
    719. 

  719. </blockquote>
    720. 

  720. <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>
    721. 

  721. <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>
    722. 

  722. Uses fixed white text on blue background
    723. 

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

  724. </code></pre>
    725. 

  725. <blockquote>
    726. 

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

  727. </blockquote>
    728. 

  728. <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>
    729. 

  729. <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>
    730. 

  730.   <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>
    731. 

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

  732. <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>
    733. 

  733.   <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>
    734. 

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

  735. <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>
    736. 

  736.   Apply setting
    737. 

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

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

  739. <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>
    740. 

  740. {{ color }} text
    741. 

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

  742. 

  743. <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>
    744. 

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

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

  746.   {{ color }} background
    747. 

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

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

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

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

  751.   color:<span class="hljs-built_in">string</span>;
    752. 

  752.   fontSize:<span class="hljs-built_in">number</span>;
    753. 

  753. 

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

  755.     <span class="hljs-keyword">this</span>.color = color;
    756. 

  756.     <span class="hljs-keyword">this</span>.fontSize = fontSize;
    757. 

  757.   }
    758. 

  758.   <span class="hljs-keyword">constructor</span>() {
    759. 

  759.   }
    760. 

  760.   ngOnInit() {
    761. 

  761.   }
    762. 

  762. }
    763. 

  763. </code></pre>
    764. 

  764. <h3 id="ngclass">ngClass</h3>
    765. 

  765. <blockquote>
    766. 

  766. <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;
    767. 

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

  768. </blockquote>
    769. 

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

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

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

  772. }
    773. 

  773. </code></pre>
    774. 

  774. <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>
    775. 

  775. <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>
    776. 

  776. </code></pre>
    777. 

  777. <blockquote>
    778. 

  778. <p>&#x52A8;&#x6001;&#x6DFB;&#x52A0;class</p>
    779. 

  779. </blockquote>
    780. 

  780. <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>
    781. 

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

  782. <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>
    783. 

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

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

  785. 

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

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

  788. <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>
    789. 

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

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

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

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

  793. <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>
    794. 

  794.   This will always have a blue background and
    795. 

  795.   round corners
    796. 

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

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

  798. <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>
    799. 

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

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

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

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

  803. </code></pre>
    804. 

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

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

  806.   isBordered: <span class="hljs-built_in">boolean</span>;
    807. 

  807.   classesObj: <span class="hljs-built_in">Object</span>;
    808. 

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

  809.   <span class="hljs-keyword">constructor</span>() {
    810. 

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

  811.     <span class="hljs-keyword">this</span>.classesObj = {
    812. 

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

  813.     };
    814. 

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

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

  816.   }
    817. 

  817.   ngOnInit() {
    818. 

  818.   }
    819. 

  819. 

  820. }
    821. 

  821. </code></pre>
    822. 

  822. <h3 id="ngfor">ngFor</h3>
    823. 

  823. <blockquote>
    824. 

  824. <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;
    825. 

  825. &#x4E00;&#x4E2A;&#x4E0D;&#x540C;&#x7684;&#x503C;&#x3002;<br>
    826. 

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

  827. </blockquote>
    828. 

  828. <p><code>&#x7B80;&#x5316;&#x7248;</code></p>
    829. 

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

  830. <span class="hljs-keyword">constructor</span>() {
    831. 

  831.   <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>];
    832. 

  832. }
    833. 

  833. </code></pre>
    834. 

  834. <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>
    835. 

  835.   Simple list of strings
    836. 

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

  837. <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>
    838. 

  838.   <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>
    839. 

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

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

  841. Miami
    842. 

  842. Sao Paulo
    843. 

  843. New York
    844. 

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

  845. <p><code>&#x8FDB;&#x9636;&#x7248;</code></p>
    846. 

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

  847. <span class="hljs-keyword">constructor</span>() {
    848. 

  848.   <span class="hljs-keyword">this</span>.people = [
    849. 

  849.     { 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> },
    850. 

  850.     { 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> },
    851. 

  851.     { 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> }
    852. 

  852.   ];
    853. 

  853. }
    854. 

  854. </code></pre>
    855. 

  855. <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>
    856. 

  856. <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>
    857. 

  857.   List of objects
    858. 

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

  859. <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>
    860. 

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

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

  862.       <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>
    863. 

  863.       <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>
    864. 

  864.       <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>
    865. 

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

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

  867.   <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>
    868. 

  868.     <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>
    869. 

  869.     <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>
    870. 

  870.     <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>
    871. 

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

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

  873. </code></pre>
    874. 

  874. <p><code>&#x8F93;&#x51FA;</code></p>
    875. 

  875. <table>
    876. 

  876. <thead>
    877. 

  877. <tr>
    878. 

  878. <th style="text-align:center">Name</th>
    879. 

  879. <th style="text-align:center">Age</th>
    880. 

  880. <th style="text-align:center">City</th>
    881. 

  881. </tr>
    882. 

  882. </thead>
    883. 

  883. <tbody>
    884. 

  884. <tr>
    885. 

  885. <td style="text-align:center">Anderson</td>
    886. 

  886. <td style="text-align:center">35</td>
    887. 

  887. <td style="text-align:center">Sao Paulo</td>
    888. 

  888. </tr>
    889. 

  889. <tr>
    890. 

  890. <td style="text-align:center">John</td>
    891. 

  891. <td style="text-align:center">12</td>
    892. 

  892. <td style="text-align:center">Miami</td>
    893. 

  893. </tr>
    894. 

  894. <tr>
    895. 

  895. <td style="text-align:center">Peter</td>
    896. 

  896. <td style="text-align:center">22</td>
    897. 

  897. <td style="text-align:center">New York</td>
    898. 

  898. </tr>
    899. 

  899. </tbody>
    900. 

  900. </table>
    901. 

  901. <p><code>&#x5D4C;&#x5957;&#x6570;&#x7EC4;</code></p>
    902. 

  902. <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>
    903. 

  903.   Nested data
    904. 

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

  905. <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>
    906. 

  906.   <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>
    907. 

  907.   <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>
    908. 

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

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

  910.         <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>
    911. 

  911.         <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>
    912. 

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

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

  914.     <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>
    915. 

  915.       <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>
    916. 

  916.       <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>
    917. 

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

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

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

  920. </code></pre>
    921. 

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

  922. <span class="hljs-keyword">constructor</span>() {
    923. 

  923.   <span class="hljs-keyword">this</span>.peopleByCity = [
    924. 

  924.     {
    925. 

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

  926.       people: [
    927. 

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

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

  929.       ]
    930. 

  930.     },
    931. 

  931.     {
    932. 

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

  933.       people: [
    934. 

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

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

  936.       ]
    937. 

  937.     }
    938. 

  938.   ];
    939. 

  939. }
    940. 

  940. </code></pre>
    941. 

  941. <p><code>&#x8F93;&#x51FA; Miami</code></p>
    942. 

  942. <table>
    943. 

  943. <thead>
    944. 

  944. <tr>
    945. 

  945. <th style="text-align:center">Name</th>
    946. 

  946. <th style="text-align:center">Age</th>
    947. 

  947. </tr>
    948. 

  948. </thead>
    949. 

  949. <tbody>
    950. 

  950. <tr>
    951. 

  951. <td style="text-align:center">John</td>
    952. 

  952. <td style="text-align:center">12</td>
    953. 

  953. </tr>
    954. 

  954. <tr>
    955. 

  955. <td style="text-align:center">Angel</td>
    956. 

  956. <td style="text-align:center">22</td>
    957. 

  957. </tr>
    958. 

  958. </tbody>
    959. 

  959. </table>
    960. 

  960. <p><code>&#x8F93;&#x51FA; Sao Paulo</code></p>
    961. 

  961. <table>
    962. 

  962. <thead>
    963. 

  963. <tr>
    964. 

  964. <th style="text-align:center">Name</th>
    965. 

  965. <th style="text-align:center">Age</th>
    966. 

  966. </tr>
    967. 

  967. </thead>
    968. 

  968. <tbody>
    969. 

  969. <tr>
    970. 

  970. <td style="text-align:center">Anderson</td>
    971. 

  971. <td style="text-align:center">35</td>
    972. 

  972. </tr>
    973. 

  973. <tr>
    974. 

  974. <td style="text-align:center">Felipe</td>
    975. 

  975. <td style="text-align:center">36</td>
    976. 

  976. </tr>
    977. 

  977. </tbody>
    978. 

  978. </table>
    979. 

  979. <p><code>&#x83B7;&#x53D6;&#x7D22;&#x5F15;</code></p>
    980. 

  980. <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>
    981. 

  981.   <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>
    982. 

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

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

  984. 1-Miami
    985. 

  985. 2-Sao Paulo
    986. 

  986. 3-New York
    987. 

  987. </code></pre>
    988. 

  988. <h3 id="ngnonbindable">ngNonBindable</h3>
    989. 

  989. <blockquote>
    990. 

  990. <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>
    991. 

  991. </blockquote>
    992. 

  992. <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>
    993. 

  993.   <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>
    994. 

  994.   <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>
    995. 

  995.     &amp;larr;This is what {{ content }} rendered
    996. 

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

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

  998. &#x8F93;&#x51FA;
    999. 

  999. &#x6587;&#x7AE0; &#x2190;This is what {{ content }} rendered
    1000. 

  1000. </code></pre>
    1001. 

  1001. 

  1002.                             </div>
    1003. 

  1003.                             
    1004. 

  1004. <hr>
    1005. 

  1005. <div class="btn-group btn-group-justified">
    1006. 

  1006.     
    1007. 

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

  1008.     
    1009. 

  1009.     
    1010. 

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

  1011.     
    1012. 

  1012. </div>
    1013. 

  1013. 

  1014.                         
    1015. 

  1015.     </div>
    1016. 

  1016.     <div class="search-results">
    1017. 

  1017.         <div class="has-results">
    1018. 

  1018.             
    1019. 

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

  1020.             <ul class="search-results-list"></ul>
    1021. 

  1021.             
    1022. 

  1022.         </div>
    1023. 

  1023.         <div class="no-results">
    1024. 

  1024.             
    1025. 

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

  1026.             
    1027. 

  1027.         </div>
    1028. 

  1028.     </div>
    1029. 

  1029. </div>
    1030. 

  1030. 

  1031.                     </div>
    1032. 

  1032.                 </div>
    1033. 

  1033.             </div>
    1034. 

  1034.         </div>
    1035. 

  1035.     </div>
    1036. 

  1036. 

  1037.     <footer class="gb-page-footer">
    1038. 

  1038.         <div class="container">
    1039. 

  1039.             <ul class="menu">
    1040. 

  1040.                 <li class="pull-right">
    1041. 

  1041.                     <span class="service-info">Copyright GitBook 2018</span>
    1042. 

  1042.                 </li>
    1043. 

  1043.                 <li>
    1044. 

  1044.                     <a href="#">Return to the top</a>
    1045. 

  1045.                 </li>
    1046. 

  1046.                 <li>
    1047. 

  1047.                     <a href="#">Updated May 30th 18</a>
    1048. 

  1048.                 </li>
    1049. 

  1049.             </ul>
    1050. 

  1050.         </div>
    1051. 

  1051.     </footer>
    1052. 

  1052. </div>
    1053. 

  1053. 

  1054. <script src="../../gitbook/gitbook.js"></script>
    1055. 

  1055. 

  1056.     
    1057. 

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

  1058.     
    1059. 

  1059. 

  1060.     
    1061. 

  1061.     <script src="../../gitbook/gitbook-plugin-search-pro/search.js"></script>
    1062. 

  1062.     
    1063. 

  1063. 

  1064.     
    1065. 

  1065.     <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
    1066. 

  1066.     
    1067. 

  1067. 

  1068.     
    1069. 

  1069.     <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
    1070. 

  1070.     
    1071. 

  1071. 

  1072. <script>
    1073. 

  1073. (function() {
    1074. 

  1074.     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-31T08:40:51.550Z"},"basePath":"../..","book":{"language":""}});
    1075. 

  1075. })();
    1076. 

  1076. </script>
    1077. 

  1077. 

  1078.         
    1079. 

  1079.     </body>
    1080. 

  1080. </html>
    1081. 

  1081.