行如風(fēng)Angular初識4-創(chuàng)新互聯(lián)

學(xué)習(xí)Angular已經(jīng)有一段時間了，可以說收獲越來越多，上一篇主要說了一下關(guān)于數(shù)據(jù)雙向綁定MVVM的問題，今天來說一下Angular的用到的一些關(guān)鍵指令以及它的用法~~

創(chuàng)新互聯(lián)建站堅信：善待客戶，將會成為終身客戶。我們能堅持多年，是因為我們一直可值得信賴。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。10年網(wǎng)站建設(shè)經(jīng)驗創(chuàng)新互聯(lián)建站是成都老牌網(wǎng)站營銷服務(wù)商,為您提供網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站設(shè)計、html5、網(wǎng)站制作、品牌網(wǎng)站設(shè)計、小程序制作服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

1.首先，先說一下ng-app，ng-controller和ng-init；

ng-app是Angular模塊初始化的指令，Angular的指令如果要起作用，必須放在對應(yīng)的ng-app模塊內(nèi)部。

ng-controller是Angular的控制器，通常情況下會和ng-app一起放一個HTML標簽里，其他指令也必須放到它的內(nèi)部。

ng-init是$scope值初始定義的指令作用如下：

<divng-app=""ng-init="firstName='John'">
<p>在輸入框中嘗試輸入：</p>
<p>你輸入的為：{{ firstName }}</p>
</div>

2.然后說一下關(guān)于內(nèi)容綁定的指令ng-model和ng-bind和{{內(nèi)容}}

<p>你輸入的為：{{ firstName }}</p>
<p>姓名：<inputtype="text"ng-model="firstName"></p>
<p ng-bind="firstName"></p>

ng-model指令適用于Form表單的value值綁定

ng-bind指令和`XX`適用于其他標簽的內(nèi)容綁定

3.顯示和隱藏指令ng-show，ng-hide以及ng-if

<div ng-app="">
<p ng-show="true">我是可見的。</p>
<p ng-show="false">我是不可見的。</p>
<p ng-if="true">我是可見的。(被克隆添加到父元素里)</p>
<p ng-if="false">我是不可見的。(從父元素里刪除)</p>
</div>

4.重復(fù)Html元素ng-repeat,ng-options

ng-repeat指令對于集合中（數(shù)組中）的每個項會克隆一次 HTML元素, ng-repeat 有局限性，選擇的值是一個字符串:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="`x`.`url`">`x`.`site`</option>
</select>
<h2>你選擇的是: `selectedSite`</h2>

使用ng-options指令，選擇的值是一個對象:

<select ng-model="selectedSite" ng-options="x.site forx in sites">
</select>
<h2>你選擇的是: `selectedSite`.`site`</h2>
<p>網(wǎng)址為: `selectedSite`.`url`</p>

5.ng-disabled指令

ng-disabled 指令直接綁定應(yīng)用程序數(shù)據(jù)到 HTML 的 disabled 屬性。

<div ng-app="" ng-init="mySwitch=true">
<p><button ng-disabled="mySwitch">點我!</button></p>
<p><input type="checkbox" ng-model="mySwitch">按鈕</p>
<p>{{ mySwitch }}</p>
</div>

上面的指令是使用Angular會經(jīng)常用到的指令，仔細的寫一遍收獲會更大~~~bilibili

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：行如風(fēng)Angular初識4-創(chuàng)新互聯(lián)
鏈接URL：http://muchs.cn/article46/djgihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)頁設(shè)計公司、外貿(mào)建站、響應(yīng)式網(wǎng)站、用戶體驗

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容