Angularjs 解释幕后ng模型和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元素。toggleDisplayHide是一个表达式吗

ng model指令将HTML控件的值绑定到应用程序数据。toggleDisplayHide在这里指的是应用程序数据吗

是这样的吗

---

选中该复选框后，ng模型将toggleDisplayHide的值设置为true。ng show知道，表达式toggleDisplayHide的值设置为true，它显示内容。

Angular docs是了解这些内容的好地方，它也有很好的文档记录。刚才在这里添加了一些文档摘录：

ng秀

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

ng模型

ngModel指令使用NgModelController将输入、选择、textarea（或自定义表单控件）绑定到作用域上的属性，NgModelController由该指令创建和公开

ngModel负责：

• 将视图绑定到模型中，其他指令如 输入、文本区域或选择“需要”
• 提供验证行为（即必填项、编号、电子邮件、url）。 保持控件的状态（有效/无效、脏/原始、， 触摸/未触摸，验证错误）
• 在元素上设置相关css类（ng有效、ng无效、， ng肮脏、ng原始、ng触摸、ng未触摸）包括 动画
• 将控件注册到其父窗体

注意：ngModel将尝试通过计算 当前作用域上的表达式。如果该属性不存在 在这个作用域上，它将被隐式创建并添加到作用域中

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

---

ng show

将在范围内计算表达式

toggleDisplayHide

，如果其真实性将显示DOM，则其他DOM将隐藏。

ng模型提供了angularjs双向绑定的真实体验。提供给ngModel的属性将绑定到相应的scope属性。如果范围中不存在该属性，angularjs将自动创建。所以属性应该是末尾的作用域属性

---

ng show只是根据提供给ngShow属性的表达式隐藏/显示一些html内容。表达式可以是任何有效的javascript表达式。如果表达式为Truthy，则将显示html内容，否则将隐藏它。ngShow只是使用css属性display:hide/show

理想情况下，您应该阅读angularjs文档/教程以获得答案。。总之，在高层，ng模型指定与输入元素绑定的模型属性/字段。选中/取消选中复选框时，toggleDisplayHide的值将进行切换，并且正是该值决定是隐藏还是显示后面的文本。