Angularjs는 장바구니 금액 계산 추가 기능을 구현합니다.

이번에는 장바구니 금액 계산 추가 기능을 구현하기 위해 angularjs를 가져왔습니다. 장바구니 금액 계산 추가 기능을 구현하기 위해Angularjs가 구현한 notes는 무엇입니까? 다음은 실제 사례입니다. 보세요.

장바구니 금액을 계산하기 위해 js나 jquery를 사용할 때 매우 번거로울 것입니다. 오늘은 장바구니 총액을 계산하기 위해 새로운 방법인angularjs를 사용합니다. 코드는 다음과 같습니다.

nbsp;html>


  <meta>
  <title>angular购物金额计算器</title>


  价格:<input>
  <br><br>
  数量:<input>
  <p>运费:{{cup.fee|currency:"¥"}}</p>
  <p>总金额:{{all()|currency:"¥"}}</p><!-- 过滤器currency -->

<script></script>
<script>
  // 购物金额计算
  function sum($scope){
    $scope.cup={
      "price":12,
      "count":1,
      "fee":20
    }
    $scope.all=function(){
      return $scope.cup.price*$scope.cup.count;
    }
    // $watch
    // 监听变化
    // 有三个参数
    // 1.函数或属性
    // 2.callback
    // 3.true深度监听
    $scope.$watch("all()",function(nval, oval){
      //console.log(nval+":"+oval);
      if(nval<100){
        $scope.cup.fee=20;
      }
      else{
        $scope.cup.fee=0;
      }
    },true)
    $scope.$watch("cup.count",function(nval, oval){
      //console.log(nval+":"+oval);
      if(nval<1){
        $scope.cup.fee=0;
      }
    },true)
  }
</script>
<script>
</script>

작동 효과:

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천도서:

JS 콜백 함수 사용 사례에 대한 자세한 설명

React Navigation 실제 전투 시 주의사항은 무엇인가요

위 내용은 Angularjs는 장바구니 금액 계산 추가 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!