angular学习总结的笔记(03):angular-双向数据绑定(下)

angularJS做用户名验证,提示用户名错误和正确;

代码如下

<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap.css"/>
</head>
<body>
<div class="form-group" ng-class="{'has-error':username.length>6}">
<label for="username" class="control-label">用户名</label>
<input type="text" id="username" ng-model="username" class="form-control"/>
</div>
<div ng-show="username.length<=6">用户名合法【</div>
<div ng-hide="username.length<=6">用户名非法【×</div>
<script src="angular.js"></script>
</body>
</html>

单向和双向数据绑定区别:

单向数据绑定:

模板+模型=视图;一旦渲染了,就不能更改了,要更改就需要重新渲染;大型的项目,如果改一两字段,就重新渲染,代价太大了;

双向数据绑定:

模型会影响视图,视图也会影响模型;

做一个购物车的案例;可以同步计算商品的价格,折扣,满减的;

<!DOCTYPE html>
<html ng-app="appModule">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap.css"/>
</head>
<body>
<div class="container" ng-controller="CartController">
<table class="table">
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>金额</td>
<td>删除</td>
</tr>
<tr ng-repeat="item in items">
<td> <span ng-bind="item.name"></span></td>
<td> <span ng-bind="item.price"></span></td>
<td><input type="text" ng-model="item.quantity"/></td>
<td> <span ng-bind="item.price*item.quantity"></span></td>
<td><button ng-click="remove($index)" class="btn-danger">删除</button></td>
</tr>
<tr>
<td>总金额<span ng-bind="total()|currency"></span></td>
<td>折扣金额<span ng-bind="discount()|currency"></span></td>
<td>最终金额<span ng-bind="(total()-discount())|currency"></span></td>
</tr>
</table>
</div>
</body>
<script src="angular.js"></script>
<script>
var app = angular.module('appModule',[]);
app.controller('CartController',function($scope){
$scope.items = [
{name:'iphone5',quantity:1,price:10},
{name:'iphone6',quantity:1,price:20},
{name:'iphone7',quantity:1,price:30},
];
$scope.remove = function(index){
$scope.items.splice(index,1);
};
$scope.total = function(){
var total = 0;
$scope.items.forEach(function(item){
total+=item.price*item.quantity;
});
return total;
};
$scope.discount = function(){
var total = $scope.total();
return total>=100?total*0.1:0;//当金额满100.折扣下来,减多少;
}
});
</script>
</html>

~~~~~~~~~~~

未经允许不得转载:朱邦邦的WEB前端开发博客 » angular学习总结的笔记(03):angular-双向数据绑定(下)

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址