AngularJS 学习笔记 （四） 基本概念和用法 之 双向数据绑定

1、取值表达式与ng-bind指令

2、双向数据绑定的经典才场景 -- 表单

html代码：

form.js代码:

运行效果1：原始显示效果，并点击按钮1

运行效果2：点击测试02按钮后，再点击测试01按钮查看控制台信息。

PS：请看，这里视图发生了变化，是由数据模型改变而改变的。

运行效果3：点击测试03重置按钮后，再点击测试01查看控制台信息。

运行效果4：输入其他的信息，Model发生变化。

PS：这里就是双向数据绑定。

3、动态切换css标签样式

3.1 切换CSS样式的方法之一

html代码：

css样式：

JS代码：

效果图，点击前后：

PS：动手敲敲代码，感觉越来越熟练了。

3.2 切换CSS样式的方法之二 ng-class （推荐）

html代码：

CSS代码:

JS代码：

运行效果1：初始状态

运行状态2：点击Simulate Error

运行状态3：点击Simulate Warning

PS：查看文档ng-class的用法之二

4、ng-show和ng-hide

html代码：

JS代码：

运行效果1：初始状态

运行效果2：点击按钮后

PS：ng-show 和 ng-hide的用法是控制其的布尔值，由AngularJS判断是否显示。

5、ngAnimate

PS：好懒了直接说话。

1. 依赖模块加入 ngAnimate 比如：var MyApp = angular.module("Myapp",["ngAnimate"]);
2. 使用：在*.CSS中增加使用.ng-center 和 .ng-leave（当进入时 和 离开时）
3. 具体使用：需要和前面的类连起来用，不能有空格。
4. 例子： .hello.ng-leave{index:9999;}。不能写成.hello .ng-enter。

（编辑：李大同）

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