AngularJS 카 트 전 선/전 선 기능 취소 실현 방법

angularJS 를 배 운 지 얼마 되 지 않 아 카 트 와 유사 한 전 선/전 선 취소 기능 을 연습 하 였 는데 주로 실 현 된 기능 은 다음 과 같다.
1.전체 checkbox 를 선택 하고 목록 데 이 터 를 모두 선택 하 며 동 리 를 취소 하고 ng-model 로 양 방향 연결 을 실현 합 니 다.
2.목록 에 있 는 모든 checkbox 를 선택 하면 전체 선택 이 선 택 됩 니 다.(여기 서 제 가 생각 하 는 방법 은 모든 대상 에 checked 필드 를 추가 한 다음 에 echoChange()함 수 를 선택 하고 cc 변 수 를 사용 하여 현재 checked 가 true 인 개 수 를 계산 한 다음 에 선택 한 개수 와 배열 의 길이 가 같 는 지 판단 하 는 것 입 니 다.똑 같 으 면 모두 선택 되 었 음 을 증명 합 니 다.그래서 전체 선택 단추 도 true 로 할당 합 니 다.더 쉬 운 방법 이 있 는 지 모 르 겠 어 요.감사합니다.
3.모든 체크 후 전체 체크 상 태 를 취소 하면 false 입 니 다.
4.카 트 의 소계 와 총 금액 계산 을 실현 하고 선 택 된 상품 만 계산한다.
완벽 해 야 할 문제 가 존재 한다.
1.수량 은 type="number"를 사 용 했 습 니 다.min=10 을 설 정 했 지만 수 동 으로 입력 한 값 은 제한 이 없 기 때문에 수 동 으로 입력 하면 불법 값 이 있 습 니 다.
2.상품 기능 을 삭제 할 때 저 는 pop()방법 으로 마지막 배열 요 소 를 제거 하고 실제 적 으로 모든 상품 대상 을 삭제 해 야 합 니 다.
3.전체 선거/취 소 는 더욱 엄밀 한 방법 이 있어 야 하 며 보완 해 야 한다.
효과 도 첨부:

코드 첨부:


<!DOCTYPE html>
<html lang="en" ng-app="testMo">
<head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >
 <style>
  .div1{
   margin: 20px;
  }
 </style>
</head>
<body>
<div ng-controller="testCtrl" class="div1">
 <h4>angularJS--       /    </h4>
 <button type="button" class="btn btn-info" ng-click="addProduct()">    </button>
 <button type="button" class="btn btn-danger" ng-click="deleteProduct()">    </button>
 <br><br>
 <table class="table table-bordered table-responsive" >
  <thead>
  <td>  </td>
  <td>check  </td>
  <td>    </td>
  <td>  </td>
  <td>  </td>
  <td>  </td>
  </thead>
  <tr ng-repeat="p in cart" >
   <td><input type="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>  ：<input type="number" ng-model="p.count" min="0" value="p.count"></td>
   <td>  ：￥{{p.sum}}</td>
  </tr>
 </table>
 <br>
 <input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"><span ng-hide="selectAll" >  </span><span ng-show="selectAll">    </span>
 <br><br>
    <span>{{jishuqi}}</span>   ，   ：<span>￥{{ sumTotal }}</span>
 
</div>
<script src="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>

위 코드 에 문제 가 있 거나 더 좋 은 제안 이 있 으 시 면 연락 주세요.감사합니다.
이상 의 AngularJS 카 트 전 선/전 선 기능 을 취소 하 는 실현 방법 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

SpringMvc+Angularjs 멀티 파일 대량 업로드

SpringMvc 코드 jar 가방 commons-fileupload commons-io spring-mvc.xml 구성 Controller 로컬 저장 AngularJs 코드 Form 양식 커밋 위에서 말한 것은 여...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

AngularJS 카 트 전 선/전 선 기능 취소 실현 방법

좋은 웹페이지 즐겨찾기