⽤angularjs在循环遍历中绑定ng-model（转载---CSDN博客）⽤angularjs在循环遍历中绑定ng-model
原⽂
angularjs的双向绑定⾮常的好⽤，当修改了⼀个地⽅的值后另外⼀个地⽅也同步修改了，如果⽤平时的js来写的话需要写很多代码，但是⽤了angularjs后只需要⼏⾏代码就能轻松搞定。
想做⼀个类似于淘宝的改价的功能，就是当⽤户拍下了宝贝后卖家给你调价的那个功能，界⾯就像这样：
当修改了折扣或者直接填写了优惠价格的时候折扣和优惠价格就会去计算，先看看html的代码：
<!doctype html>
<html ng-app="app">
<head>
<script src="js/angular.min.js"></script>
<script src="js/chen.js"></script>
</head>
<body ng-controller="formController">
<table border='1' cellpadding=0 cellspacing=0>
<tr>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
<td>优惠</td>
</tr>
<tr ng-repeat="a in array">
<td>{{a.name}}</td>
<td>{{a.price}}</td>
<td>{{a.count}}</td>
<td>{{a.count*a.price}}</td>angular和angularjs
<td><input size="1" ng-model='a.discount'
ng-change="chanage(this)" /> 折 = <input size="1" ng-model='a.p'
ng-change="chanage2(this)" /></td>
</tr>
</table>
买家应付：  {{itemSum}}-{{preferential}}={{sum}}
<br> ⽀付说明：总价-优惠=实际⽀付
</body>
</html>
绑定在<input>标签上⾯的"a.discount"和“a.p”在controller⾥⾯的数组中并没有这两个数据，但是这么绑定了后如果你在⾥⾯填写了值就⾃动会在数组中创建出来
然后是angularjs的控制层：
var app = dule('app', []);
$scope.array = [{
name : '⼩⽶',
price : '20',
count : '2'
}, {
name : '三星',
price : '50',
count : '1'
}]; // 表格数据
$scope.itemSum = 0; // 表格⾥⾯的总价
$scope.preferential = 0; // 表单的优惠
$scope.sum = 0; // 实际总价
for (var i = 0; i < $scope.array.length; i++) {
/
/ 计算表单的总价
var node = $scope.array[i];
$scope.itemSum += (unt * node.price);
}
$scope.chanage = function(t) {
// 修改折扣后触发事件
var node = t.a
node.p = node.discount / 10 * unt * node.price;// 计算折扣对应的⾦额
}
$scope.chanage2 = function(t) {
// 修改优惠价格后对应的change事件
var node = t.a
var total = node.price * unt;
node.discount = (total - node.p) / total * 10;// 修改优惠价格后对应的折扣
}
$scope.$watch('array', aa, true);// 监听显⽰表格的数据，如果修改了就调⽤aa的⽅法      function aa() {
// 该⽅法主要是在修改了折扣或优惠后计算出新的应付的价格
$scope.preferential = 0;
for (var i = 0; i < $scope.array.length; i++) {
var p = $scope.array[i].p;
if (p != null) {
$scope.preferential += ($scope.array[i].p - 0);
}
}
$scope.sum = $scope.itemSum - $scope.preferential;
}
})
最后的效果：
当修改了折扣或优惠的⾦额后其他的地⽅就会同步的计算出来；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。