您的位置：首页 > Web前端 > JavaScript

Angular.js基本概念和用法--（一双向数据绑定）

2018-03-26 16:11 801 查看

上一章节：Angular.js基本概念和用法--（一路由、模块、依赖注入）
这个双向数据绑定指的是从数据模型到视图，从视图到数据模型之间的双向绑定。
前面介绍过AngularJS是一个MVC框架，我们在操作的时候主要是通过控制器进行操作的，让控制器去修改数据模型，然后数据模型的变更会反映到视图上。
内容简介
1.最简单的例子
2.取值表达式与ng-bind指令
3.双向数据绑定的典型场景
4.动态切换标签样式
5.ng-show和ng-hide
6.ng-class
7.ngAnimate
一、最简单的例子

还是原来这个例子，当你狂刷页面的时候，你会发现，页面会闪现出双花括号。那这种情况该怎么解决呢？很简单AngularJS提供了ng-bind指令。

这样的话即使网络不好也不会出现双花括号了，那么什么时候用{{}}什么时候用ng-bind呢？
一般在首页index.html用ng-bind来绑定，因为要{{}}生效，必须等到所有的模块通过<script>标签加载完成之后，而这些模块脚本文件都是存放在index.html文件里面的。
二、双向数据绑定的典型场景<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">双向数据绑定</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
<div class="form-group">
<label class="col-md-2 control-label">
邮箱：
</label>
<div class="col-md-10">
<input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">
密码：
</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="userInfo.autoLogin">自动登录
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>
<button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>
<button class="btn btn-default" ng-click="resetForm()">重置表单</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>首先在<html>标签上面设置一个启动点<html ng-app="UserInfoModule">
然后在form表单里面添加一个UserInfoCtrl控制器，在脚本里面编写这个控制器的动作var userInfoModule = angular.module('UserInfoModule', []);
userInfoModule.controller('UserInfoCtrl', ['$scope',
function($scope) {
$scope.userInfo = {
email: "253445528@qq.com",
password: "253445528",
autoLogin: true
};
$scope.getFormData = function() {
console.log($scope.userInfo);
};
$scope.setFormData = function() {
$scope.userInfo = {
email: 'damoqiongqiu@126.com',
password: 'damoqiongqiu',
autoLogin: false
}
};
$scope.resetForm = function() {
$scope.userInfo = {
email: "253445528@qq.com",
password: "253445528",
autoLogin: true
};
}
}
])最后用ng-model做数据绑定
三、动态切换标签样式<div ng-controller="CSSCtrl">
<p class="text-{{color}}">测试CSS样式</p>
<button class="btn btn-default" ng-click="setGreen()">绿色</button>
</div>

var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
function($scope) {
$scope.color = "red";
$scope.setGreen = function() {
$scope.color = "green";
}
}
])

.text-red {
background-color: #ff0000;
}
.text-green {
background-color: #00ff00;
}

效果：点击绿色按钮之后，背景颜色变成绿色了，这个例子还是比较容易理解的。
但是这种方式有一些问题，如果{{color}}取值取错了，那么很有可能就会出错了。这时候AngularJS提供了ng-class指令<div ng-controller='HeaderController'>
<div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
<button ng-click='showError()'>Simulate Error</button>
<button ng-click='showWarning()'>Simulate Warning</button>
</div>我们看一下ng-class的写法，当isError的值为false的时候，就不会用error这个样式类，当他为true的时候就使用这个样式类。
四、ng-show和ng-hide<div ng-controller='DeathrayMenuController'>
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState.show'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
<div/>当ng-show为true的时候显示，false则隐藏，ng-hide的效果和ng-show相反。
五、ngAnimate<div class="page {{pageClass}}" ng-view></div>

.page {
bottom:0;
padding-top:200px;
position:absolute;
text-align:center;
top:0;
width:100%;
}
.page h1 {
font-size:60px;
}
.page a {
margin-top:50px;
}
.hello {
background:#00D0BC;
color:#FFFFFF;
}
.list{
background:#E59400;
color:#FFFFFF;
}
@keyframes rotateFall {
0% {
transform: rotateZ(0deg);
}
20% {
transform: rotateZ(10deg);
animation-timing-function: ease-out;
}
40% {
transform: rotateZ(17deg);
}
60% {
transform: rotateZ(16deg);
}
100% {
transform: translateY(100%) rotateZ(17deg);
}
}
@keyframes slideOutLeft {
to {
transform: translateX(-100%);
}
}
@keyframes rotateOutNewspaper {
to {
transform: translateZ(-3000px) rotateZ(360deg);
opacity: 0;
}
}
@keyframes scaleUp {
from {
opacity: 0.3;
-webkit-transform: scale(0.8);
}
}
@keyframes slideInRight {
from {
transform:translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
transform:translateY(100%);
}
to {
transform: translateY(0);
}
}
.ng-enter {
z-index: 8888;
}
.ng-leave {
z-index: 9999;
}
.hello.ng-enter {
animation: scaleUp 0.5s both ease-in;
}
.hello.ng-leave {
transform-origin: 0% 0%;
animation: rotateFall 1s both ease-in;
}
.list.ng-enter {
animation:slideInRight 0.5s both ease-in;
}
.list.ng-leave {
animation:slideOutLeft 0.5s both ease-in;
}

效果：

其实在使用ng-Animate的时候，具体操作只需要在css 样式表里面操作就可以了。
在上面的html标签里面，有一个{{pageClass}}，这个绑定的值是在js脚本里面对应的控制器进行赋值的，我们可以看到在不同的控制器里面，这个变量有不同的赋值var bookStoreCtrls = angular.module('bookStoreCtrls', []);

bookStoreCtrls.controller('HelloCtrl', ['$scope',
function($scope) {
$scope.greeting = {
text: 'Hello'
};
$scope.pageClass="hello";
}
]);

bookStoreCtrls.controller('BookListCtrl', ['$scope',
function($scope) {
$scope.books = [{
title: "《Ext江湖》",
author: "大漠穷秋"
}, {
title: "《ActionScript游戏设计基础（第二版）》",
author: "大漠穷秋"
}, {
title: "《用AngularJS开
b04e
发下一代WEB应用》",
author: "大漠穷秋"
}];
$scope.pageClass="list";
}
]);一个为$scope.pageClass="hello";另一个为$scope.pageClass="list";但是这仅仅实现的是静态的样式，动态的效果呢？
在上面的css中，最需要注意的是我们通过@keyframes定义了好几个动画的css，调用的时候是通过AngularJS内置的css样式来调用。.ng-enter {
z-index: 8888;
}
.ng-leave {
z-index: 9999;
}
.hello.ng-enter {
animation: scaleUp 0.5s both ease-in;
}
.hello.ng-leave {
transform-origin: 0% 0%;
animation: rotateFall 1s both ease-in;
}
.list.ng-enter {
animation:slideInRight 0.5s both ease-in;
}
.list.ng-leave {
animation:slideOutLeft 0.5s both ease-in;
}要注意的是.hello.ng-enter这两个样式类之间是没有空格的，这是一个坑。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航