Angularjs基础(六)

发布时间：2020-12-17 10:39:54 所属栏目：安全来源：网络整理

导读：AngularJS HTML DOM AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled指令 ng-disabled指令直接绑定应用数据到HTML的disabled属性。实例： {{ mySwitch }} 实例讲解： ng-disabled 指令绑定应用程序数据mySwitch到HTML 的disabled 属

AngularJS HTML DOM
　　　　AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled指令
　　　　ng-disabled指令直接绑定应用数据到HTML的disabled属性。
　　　　　　实例：
　　　　　　

　　　　实例讲解：
　　　　　　　　ng-disabled 指令绑定应用程序数据“mySwitch”到HTML 的disabled 属性。
　　　　　　　　ng-model 指令绑定 “mySwitch”到HTML input checkbox 元素的内容(value).
　　　　　　　　如果mySwitch 为true ，按钮将不可用。
　　　　　　　　

　　　　　　　　　　如果 mySwitch 为false,按钮则可用:
　　　　　　　　

ng-show 指令
　　　　ng-show 指令隐藏或显示一个HTML 元素。
　　　　实例
　　　　　　

　　　　ng-show指令是根据value的值来显示(隐藏)HTML元素。
　　　　你可以使用表达式来计算布尔值(true或false):
　　　　实例：
　　　　　　

ng-hide指令
　　　　ng-hide指令用于隐藏或者显示HTML 元素。
　　　　实例
　　　　　　

AngularJS 事件
　　　　AngularJS 有自己的HTML 事件指令

ng-click 指令
　　　　ng-click 指令定义了AngularJS 点击事件
　　　　实例：
　　　　　　

隐藏HTML元素
　　　　ng-hide 指令用于设计应用部分是否可见
　　　　ng-hide="true"设置HTML元素不可见，
　　　　ng-hide="false"设置HTML 元素不可见。
　　　　实例：
　　　　　　

　　　　　　　　　　名：　　　　　　　　　　姓名：　　　　　　　　　　Full Name:{{firstName + ""+lastName}}
　　　　　　　　

　　　　　　
　　　　应用解析:
　　　　　　第一部分 personController与控制器章节类似。
　　　　　　　　应用有一个默认属性：$scope.myVar = false;
　　　　　　　　ng-hide指令设置

元素及两个输入域是否可见，根据myVar的值（true 或false）来设置是否可见
　　　　　　　　toggle()函数用于切换myVar 变量的值(true 和false)
　　　　　　　　ng-hide="true"让元素不可见。

显示HTML元素
　　　　ng-show 指令可用于设置应用中心的一部分是否可见。
　　　　ng-show="false" 可以设置HTML 元素不可见。
　　　　ng-show=“true”可以设置HTML元素可见。
　　　　　　实例：
　　　　　　　　

AngularJS 模块
　　　　模块定义了一个应用程序。
　　　　模块是应用程序中不同部分的容器。
　　　　模块是应用控制器的容器。
　　　　控制器通常属于一个模块。

创建模块
　　　　

　　　　
　　　　“myApp”参数对应执行应用的HTML元素。
　　　　现在你可以在AngularJS 应用中添加控制器，指令，过滤器等。

添加控制器
　　　　你可以使用ng-controller 指令来添加应用的控制器。
　　　　实例：
　　　　　　

添加指令
　　　　　　AngularJS 提供了很多内置的命令，你可以使用它们来为你的应用添加功能。
　　　　　　　　实例：
　　　　　　　　　　

模块和控制器包含在JS 文件中
　　　　通常AngularJS 应用程序将模块和控制器包含在JavaScript文档中
　　　　
　　　　
　　　　　　
　　　　　　
　　　　　　　　
　　　　　　　　
　　　　　　　　　　

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!