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

前端之家收集整理的这篇文章主要介绍了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。
原文链接:https://www.f2er.com/angularjs/149417.html

猜你在找的Angularjs相关文章