- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
在学习用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
Tambah fungsi
function totalPrize(){
var total=0;
angular.forEach($scope.todo2,function(item,index){
total+=item.price*item.total;
})
$('.total').text(total);
}dan fungsi del ditukar kepada
$scope.del = function(id) {
// alert($scope.todo2.length)
$scope.todo2.splice(id,1)
totalPrize();
}Saya perlu mengadu bahawa kod semasa anda tidak kelihatan seperti anda menulis dalam Angular sama sekali, ia masih pada tahap jQuery. Mengurangkan operasi dom ialah niat asal Angularjs, tetapi anda terus menggunakan kaedah .text() untuk menetapkan nilai. Mengapa tidak hanya mengikat jumlah kepada $scope dan hanya {{total}} pada html.
Selain itu, tidak digalakkan untuk meletakkan model tatasusunan secara langsung di luar untuk mencemarkan pembolehubah global. Anda juga boleh meletakkan kod init permulaan dalam pengawal Tidak perlu init dalam html.
Padamkan elemen dalam tatasusunan, dan jumlah harga tidak mempunyai sebab untuk berubah Pertama, jumlah harga tidak terikat kepada skop Tambahan pula, walaupun jumlah pembolehubah harga terikat kepada skop, ia juga merupakan a jenis data primitif Selepas setiap operasi, , anda perlu mengiranya sekali lagi untuk mendapatkan jumlah harga.
<!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>Masukkan sekeping kod saya Terdapat banyak perkara yang boleh dioptimumkan, tetapi saya perlu berlari dan tidak mempunyai masa untuk menukarnya. Jika anda ingin menggunakannya, perhatikan laluan mengimport fail js dan css
phpcn_u15822017-05-15 17:07:28
Jika anda menggunakan jQuery secara langsung untuk mengubah suai lapisan VIEW atau data lapisan MODEL, anda perlu menyegerakkan data secara manual.
Anda boleh menggunakan mengikut keperluan:
$scope.$digest()
atau
$scope.$apply(function(){
//do sth here.
})
untuk menyegerakkan data. Untuk butiran, sila rujuk API AngularJS