在幕后解释ng-model和ng-show指令的工作原理

Question

以下代码根据是否选中复选框显示/隐藏内容。 PL。详细告诉我ng-model和ng-show指令如何在幕后协同工作以产生所需的结果。

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

ng-show指令根据ng-show属性中指定的表达式显示或隐藏给定的HTML元素。 toggleDisplayHide是一个表达式吗？

ng-model指令将HTML控件的值绑定到app数据。 toggleDisplayHide是指这里的app数据吗？

这是这样的： 选中该复选框后，ng-model将toggleDisplayHide的值设置为true。并且ng-show知道表达式toggleDisplayHide的值设置为true，它显示内容。

Answer 1

Angular docs是了解这些事情的好地方，也有很好的记录。刚刚在文档中添加了一些摘录：

  

NG-显示

ngShow指令根据提供给ngShow属性的表达式显示或隐藏给定的HTML元素。通过将.ng-hide CSS类移除或添加到元素上来显示或隐藏元素。 .ng-hide CSS类在AngularJS中预定义，并将显示样式设置为none（使用！important标志）。

<强> Refer DOC

  

NG-模型

ngModel指令使用NgModelController将输入，select，textarea（或自定义表单控件）绑定到作用域上的属性，NgModelController由此指令创建并公开。

ngModel负责：

• 将视图绑定到模型中，其他指令如 输入，textarea或选择要求。
• 提供验证行为（即必需，号码，电子邮件，网址）。 保持控制状态（有效/无效，脏/原始， 触及/未触及，验证错误）。
• 在元素上设置相关的css类（ng-valid，ng-invalid， ng-dirty，ng-pristine，ng-touching，ng-untouched）包括 动画。
• 使用其父表单注册控件。

  

注意：ngModel将尝试绑定到通过评估给出的属性   表达当前范围。如果该属性尚不存在   在此范围内，它将隐式创建并添加到范围中。

Refer DOCS

  

基于此，现在回答您的问题：

ng-show将评估范围中的toggleDisplayHide表达式，如果其真实性将显示其他将隐藏的内容。

Answer 2

ng-model给出了angularjs的双向绑定的真实味道。提供给ngModel的属性将绑定到相应的scope属性。如果范围中不存在该属性，则angularjs将自动创建。所以属性应该是最后的范围属性

ng-show只是隐藏/显示一些html内容，具体取决于提供给ngShow属性的表达式。表达式可以是任何有效的javascript表达式。如果表达式为Truthy，则会显示html内容，否则将隐藏。 ngShow只使用css属性display：hide / show