在學習用angular做購物車功能時，遇到一個問題：
我在刪除一條商品時，總價沒有跟著變動，折騰了幾天，實在琢磨不出，請大家幫忙看看，謝謝大家了
<!doctype html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8"/>
<title>To Do List</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/angular.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
var model2 = [
{name:"shoes",id:1,price:22,total:2},
{name:"T－shirt",id:1,price:12,total:2},
{name:"dress",id:1,price:25,total:2},
]
var todoApp = angular.module("todoApp",[]);
todoApp.controller("ToDoCtrl",function($scope){
$scope.todo2 = model2;
$scope.init = function(){
$scope.allchecked();
}
$scope.checkedone= function(){
var totals = 0;
for(var i=0; i<$scope.todo2.length;i++){
if($scope.todo2[i].status == true){
$scope.allstatus = true
totals += $scope.todo2[i].price * $scope.todo2[i].total;
}else{
$scope.allstatus = false
}
}
$(".total").text(totals)
alert($scope.todo2.length)
}
$scope.allchecked= function(ev){
var totals = 0;
var selected = 0;
$scope.allstatus =true;
for(var i=0; i<$scope.todo2.length;i++){
if($scope.allstatus ==true){
$scope.todo2[i].status = true;
totals += $scope.todo2[i].price * $scope.todo2[i].total;
//selected +=
}else{
$scope.todo2[i].status = false;
}
}
$(".total").text(totals)
}
$scope.del= function(id){
alert( $scope.todo2.length)
$scope.todo2.splice(id,1)
}
})
</script>
<style>
table tr td{border:1px #ccc solid; padding:10px}
</style>
</head>
<body ng-controller="ToDoCtrl" ng-init="init()">
<table>
<tr>
<td> <input type="checkbox" ng-model="allstatus" ng-change="allchecked(allstatus)"/></td>
<td>name</td><td>price</td><td>total</td><td><span class="total"></span></td><td>del</td></tr>
<tr ng-repeat="z in todo2">
<td> <input type="checkbox" ng-model="z.status" ng-change="checkedone()"/></td>
<td>{{z.name}}</td>
<td>{{z.total}}</td>
<td>{{z.price}}</td>
<td>{{z.total * z.price}}</td>
<td><span ng-click="del(z.id)">delted</span></td>
</tr>
</table>
</body>
</html>
漂亮男人2017-05-15 17:07:28
新增一個函數
function totalPrize(){
var total=0;
angular.forEach($scope.todo2,function(item,index){
total+=item.price*item.total;
})
$('.total').text(total);
}且del函數改為
$scope.del = function(id) {
// alert($scope.todo2.length)
$scope.todo2.splice(id,1)
totalPrize();
}我必須吐槽下是，你現在的程式碼根本不像在用angular寫東西啊，還是停留在jQuery的層次。 減少dom操作是Angularjs的初衷，但是你直接用.text（）方法給賦值。為什麼不直接把total綁在$scope上，在html上直接{{total}}就可以了啊。
另外，將陣列model2直接放在外面，污染全域變數不可取。也可以將初始化init的程式碼放在controller中，沒必要在html中init。
刪除數組中的元素，總價沒有理由跟著變化，一則總價沒綁定到scope上，再則即使總價這個變量綁定到scope上，也是原始數據類型，你每次操作後，要獲得總價都是要再算一次的。
<!doctype html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8" />
<title>To Do List</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
table tr td {
border: 1px #ccc solid;
padding: 10px
}
</style>
</head>
<body ng-controller="ToDoCtrl">
<table>
<tr>
<td> <input type="checkbox" ng-model="allstatus" ng-change="allchecked()" /></td>
<td>name</td>
<td>price</td>
<td>total</td>
<td>{{total}}</td>
<td>del</td>
</tr>
<tr ng-repeat="z in todo2">
<td> <input type="checkbox" ng-model="z.status" ng-change="checkedone($event)" /></td>
<td>{{z.name}}</td>
<td>{{z.total}}</td>
<td>{{z.price}}</td>
<td>{{z.total * z.price}}</td>
<td><span ng-click="del(z.id)">delted</span></td>
</tr>
</table>
<script src="angular.min.js"></script>
<script src="../jquery.js"></script>
<script>
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function($scope) {
var model2 = [{
name: "shoes",
id: 1,
price: 22,
total: 2
}, {
name: "T－shirt",
id: 1,
price: 12,
total: 2
}, {
name: "dress",
id: 1,
price: 25,
total: 2
}];
$scope.todo2 = model2;
$scope.total=0;
function init() {
$scope.allstatus=true;
angular.forEach($scope.todo2,function(item){
item.status=true;
$scope.total+=item.price*item.total
})
}
init();
$scope.checkedone = function() {
totalPrize();
$scope.allstatus=checkAll();
}
function checkAll(){
for(var i=0;i<$scope.todo2.length;i++){
if(!$scope.todo2[i].status){
return false;
}
}
return true;
}
$scope.allchecked=function(){
if($scope.allstatus){
for(var i=0;i<$scope.todo2.length;i++){
$scope.todo2[i].status=true;
}
}else{
for(var i=0;i<$scope.todo2.length;i++){
$scope.todo2[i].status=false;
}
}
totalPrize()
}
$scope.del = function(id) {
$scope.todo2.splice(id,1)
totalPrize();
}
function totalPrize(){
$scope.total=0;
angular.forEach($scope.todo2,function(item,index){
if(item.status){
$scope.total+=item.price*item.total;
}
})
}
})
</script>
</body>
</html>插一段我的程式碼，還有好多可以優化的，但我要去跑步啦，沒時間改啦。 要用的話，注意引入js，css檔案的路徑
phpcn_u15822017-05-15 17:07:28
如果你直接使用jQuery來修改VIEW層或MODEL層數據，那你需要手動進行數據同步。
你可以依需求使用：
$scope.$digest()
或
$scope.$apply(function(){
//do sth here.
})
來同步資料。具體可以參考AngularJS的API