집 > 기사 > 웹 프론트엔드 > Anglejs를 사용하여 쇼핑 금액 계산 도구를 만드는 방법

Anglejs를 사용하여 쇼핑 금액 계산 도구를 만드는 방법

php中世界最好的语言원래의: 2018-05-31 10:03:011475검색

이번에는 angularjs를 사용하여 쇼핑 금액 계산 도구를 만드는 방법과Angularjs를 사용하여 쇼핑 금액 계산 도구를 만드는 방법에 대한 주의사항

은 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 바라보다.

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

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="UTF-8">
  <title> angular购物金额计算器</title>
</head>
<body ng-controller="sum">
  价格:<input type="text" ng-model="cup.price">
  <br/><br/>
  数量:<input type="text" ng-model="cup.count">
  <p>运费:{{cup.fee|currency:"¥"}}</p>
  <p>总金额:{{all()|currency:"¥"}}</p><!-- 过滤器currency -->
</body>
<script src="angular.min.js"></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>
</html>

마스터하셨을 거라 믿습니다. 이 기사의 사례를 읽은 후 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!