說明幕後的ng-model和ng-show指令的工作原理

-2

以下代碼根據複選框是否被選中來顯示/隱藏內容。 PL。詳細告訴我ng-model和ng-show指令如何在幕後一起工作以產生所需的結果。說明幕後的ng-model和ng-show指令的工作原理

<input ng-model="toggleDisplayHide" type="checkbox"/> 
<div ng-show="toggleDisplayHide">Some text goes here ...</div>

ng-show指令根據ng-show屬性中指定的表達式顯示或隱藏給定的HTML元素。 toggleDisplay是否隱藏表達式？

ng-model指令將HTML控件的值綁定到應用程序數據。 toggleDisplayHide是否在此處引用應用數據？

是這樣的：當複選框被選中時，ng-model將toggleDisplayHide的值設置爲true。而ng-show會知道表達式toggleDisplayHide的值設置爲true，它會顯示內容。

來源

2015-04-03 cool

理想情況下，你應該閱讀angularjs文檔/教程來得到你的答案.. 無論如何，在高層次，ng-model指定與輸入綁定的模型屬性/元件。當複選框被選中/取消選中時，toggleDisplayHide的值將會切換，並且它的值決定了後面的文本是隱藏還是顯示。 – Alphonso 2015-04-03 06:44:20

Angular docs是知道這些事情的好地方，它也有很好的文檔記錄。只需添加從這裏的文檔的一些摘錄：

NG秀

的ngShow指令顯示或隱藏基於提供給ngShow屬性的表達給定的HTML元素。通過移除或添加.ng-hide CSS類到元素來顯示或隱藏該元素。 .ng-hide CSS類在AngularJS中預定義，並將顯示樣式設置爲none（使用！重要標誌）。

Refer DOC

NG-模型

的ngModel指令結合輸入，選擇，文本區域使用NgModelController（或定製的形式控制）上的範圍的特性，其被創建並通過此指令公開。

ngModel負責：

綁定視圖到模型，這是其它指令，如輸入，文本區域或選擇需要。
提供驗證行爲（即必需，號碼，電子郵件，網址）。保持控件的狀態（有效/無效，髒/原始，已觸摸/未觸摸，驗證錯誤）。
在元素上設置相關的CSS類（ng-valid，ng-invalid， ng-dirty，ng-pristine，ng-touched，ng-untouched）包括動畫。
註冊與其父窗體的控件。

注：ngModel會嘗試綁定到通過對當前範圍評估表達式給出的屬性。如果該範圍上的該屬性尚不存在，則它將被隱式創建並添加到範圍中。基於

Refer DOCS

上，現在你的問題：

ng-show將範圍計算表達式toggleDisplayHide，如果它truthy將顯示DOM否則將隱藏。

來源

2015-04-03 06:44:49 mohamedrias

ng-model給出了angularjs的雙向綁定的真實味道。提供給ngModel的屬性將綁定到相應的範圍屬性。如果屬性在該範圍中不存在，則會自動創建angularjs。因此，屬性應該是末端的範圍屬性

ng-show只是根據提供給ngShow屬性的表達式來隱藏/顯示一些html內容。表達式可以是任何有效的javascript表達式。如果表達式是Truthy，html內容將被顯示，否則它將被隱藏。 ngShow只是簡單的使用CSS屬性顯示：隱藏/顯示

來源

2015-04-03 07:09:19 Samir

說明幕後的ng-model和ng-show指令的工作原理

回答

相關問題