이번에는 장바구니 전체 선택 및 역선택 기능을 만드는 AngularJS를 가져왔습니다. 장바구니 전체 선택 및 역선택 기능을 만드는 데 있어 AngularJS의 주의 사항은 무엇입니까? 사례를 살펴보겠습니다.
AngularJS를 방금 배웠기 때문에 장바구니에서 모두 선택/선택 취소와 유사한 기능 작성을 연습했습니다. 구현된 주요 기능은 다음과 같습니다.
1. 모두 선택 확인란을 선택하면 모든 목록 데이터가 선택됩니다. 취소하는 것과 동일하게 양방향 바인딩을 구현하려면 ng-model을 사용하세요. 2. 목록에서 모든 확인란을 선택하면 모두 선택됩니다. (여기서 생각하는 방법은 각 개체에 확인된 필드를 추가한 다음 이를 확인하여 echoChange() 함수를 트리거하는 것입니다. 변수를 사용하여 현재 확인된 값을 true 개수로 계산한 다음 확인된 항목의 개수가 배열의 길이와 같은지 확인합니다. 동일하면 모두 확인되었음을 증명하므로 모두 선택 버튼에도 할당됩니다. 더 간단한 방법이 있나요? 메시지를 남겨주세요. )
3. 모두 확인한 후 선택한 확인 상태를 모두 취소하면 확인 상태가 false가 됩니다.
4. 장바구니 소계 및 총액 계산을 구현하고, 체크된 상품만 계산합니다
개선해야 할 문제가 있습니다:
1. 수량에 type="number"를 사용하고 min=10으로 설정했는데 수동으로 입력하는 값에는 제한이 없으므로 수동으로 입력하면 잘못된 값이 발생합니다
2. 제품 기능을 삭제하려면 pop() 메서드를 사용하여 마지막 배열 요소를 제거했습니다. 실제로 각 제품 개체를 삭제해야 합니다.
3. 전체 선택/선택 취소에 대한 보다 엄격한 방법이 있어야 하며 개선이 필요합니다.
첨부된 코드:
<!DOCTYPE html>
<htmllang="en"ng-app="testMo">
<head>
<metacharset="UTF-8">
<title></title>
<linkrel="stylesheet"href="css/bootstrap.css"rel="external nofollow">
<style>
.p1{
margin: 20px;
}
</style>
</head>
<body>
<png-controller="testCtrl"class="p1">
<h4>angularJS--购物车实现全选/取消全选</h4>
<buttontype="button"class="btn btn-info"ng-click="addProduct()">添加商品</button>
<buttontype="button"class="btn btn-danger"ng-click="deleteProduct()">删除商品</button>
<br><br>
<tableclass="table table-bordered table-responsive">
<thead>
<td>操作</td>
<td>check状态</td>
<td>商品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</thead>
<trng-repeat="p in cart">
<td><inputtype="checkbox"ng-checked="p.checked"ng-click="echoChange(p.id,p.checked,selectAll)"></td>
<td>{{p.checked}}||{{p.checked}}</td>
<td>{{p.name}}</td>
<td>单价：￥{{p.price}}</td>
<td>数量：<inputtype="number"ng-model="p.count"min="0"value="p.count"></td>
<td>小计：￥{{p.sum}}</td>
</tr>
</table>
<br>
<inputtype="checkbox"ng-model="selectAll"ng-click="selectAllClick(selectAll)"><spanng-hide="selectAll">全选</span><spanng-show="selectAll">取消全选</span>
<br><br>
已选择<span>{{jishuqi}}</span>件商品，总金额：<span>￥{{ sumTotal }}</span>
</p>
<scriptsrc="js/angular.js"></script>
<script>
angular.module('testMo',['ng']).controller('testCtrl',function($scope){
// $scope.p1=new Object();
// $scope.p1.price=10;
// $scope.p1.count=1;
//购物车应该是一个数组
$scope.selectAll=false;//全选默认为false
$scope.cart=[{id:0,name:'商品0',price:10,count:5,sum:10,checked:false}];
$scope.addProduct= function (){
var p=new Object();
p.id=$scope.cart.length;
p.name='商品'+ p.id
p.price=Math.floor(Math.random()*100);//对数值向下取整
p.count=1;
p.sum= p.price* p.count;
p.checked=false;
$scope.cart.push({id: p.id,name: p.name,price:p.price,count: p.count,sum: p.sum,checked: p.checked});
console.log($scope.cart);
}
//删除商品
$scope.deleteProduct= function (){
$scope.cart.pop();//删除数组中的最后的一个元素，并且返回这个元素，会改变数组里的元素
}
//全选按钮check的点击事件
$scope.selectAllClick= function (sa) {
for(var i=0;i<$scope.cart.length;i++){
$scope.cart[i].checked=sa;
}
}
//单个数据的check事件
$scope.echoChange=function(id,ch,se){
$scope.cart[id].checked=!ch;
//当所有都选中时，全选也要被勾选
var cc=0;//计算当前数组中checked为真的数目
for(var i=0;i<$scope.cart.length;i++){
// if($scope.cart[i].checked==true){
// cc++;
// }
$scope.cart[i].checked?cc++:cc;
}
$scope.selectAll=(cc==$scope.cart.length);//当为真的数目=数组长度时，证明全部勾选
// console.log($scope.selectAll);
}
//监控数据
$scope.$watch('cart',function(newValue,oldValue,scope){
$scope.sumTotal=0; //总计
$scope.jishuqi=0; //计数器
for(var i in newValue) {
var sumN = newValue[i].count * newValue[i].price; //计算出新的结果
$scope.cart[i].sum = sumN.toFixed(2); //保留两位小数并且把它赋值给元数据;
if (newValue[i].checked) {
$scope.sumTotal += sumN;
$scope.jishuqi++;
// console.log($scope.sumTotal);
// console.log($scope.jishuqi);
}
}
},true);
/*$watch简介:在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。
AngularJS内部的watch实现了页面随model的及时更新。
$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。
$watch(watchFn,watchAction,deepWatch);
如果不加第三个参数，那么只会监听cart数组，只有当cart引用改变时才会触发,因此当需要监听一些引用对象时需要把第三个参数设置成true。
*/
});
</script>
</body>
</html>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
JS는 데이터 유효성 검사 및 체크박스 양식 제출을 구현합니다.vue.js 양방향 바인딩 사용법에 대한 자세한 설명JS에서 숫자와 문자열 간의 상호 변환을 구현하는 방법위 내용은 AngularJS는 장바구니가 모든 역함수를 선택하도록 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
