如何在AngularJS中添加if和let？

问题描述

我试图使我的角度脚本计算总价格，而折扣因所选数量而异（在代码中显示为“每周课程”）。就像用户选择“ 1小时率”（Cost = 260）-“每周2课（价值= 2）”-折扣必须为4.8，因此总价格=小时率成本项目。 discount（4.8）。我想根据所选的“每周经验”设置折扣

var myApp = angular.module('myApp',[]);

myApp.controller('CartForm',['$scope',function($scope) {
  $scope.invoice = {
    items: [{
        qty: 1,description: '1 Hour Per Lesson',hr: 1,discount: 0,cost: 260,value: 1,checked: true
      },{
        qty: 1,description: '1.5 Hours Per Lesson',hr: 1.5,cost: 250,value: 1.5,checked: false
      },description: '2 Hours Per Lesson',hr: 2,cost: 240,value: 2,checked: false
      }
    ]
  };

  $scope.addItem = function() {
      $scope.invoice.items.push({
        qty: 1,description: '',cost: 0,checked: true
      });
    },$scope.removeItem = function(index) {
      $scope.invoice.items.splice(index,1);
    },$scope.total = function() {

      var total = 0;
      angular.forEach($scope.invoice.items,function(item) {
        if (item.checked) {


          total += (item.qty * item.cost * item.hr) * (1 - item.discount / 100);
        }
        total += 0;
      })
      return total;
    }

}]);

body {
  text-align: center;
}

h2 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.logo {
  width: 50px;
  height: auto;
  margin-left: 15px;
}

.mycontainer {
  max-width: 910px;
  margin: 0 auto;
}

th {
  text-align: center;
}

input {
  text-align: center;
}

input[type="checkBox"] {
  /*        width: 18px; 
    height: 18px;        */
}

.row-total {
  font-size: 15px;
}

.author {
  margin-top: 150px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Online - Lessons Pricing System</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div ng-app="myApp">
    <h2>Packages Cart </h2>
    <h3>Kindly Select One Package. </h3>
    <div ng:controller="CartForm" class="mycontainer">
      <table class="table">
        <tr>
          <th>Hour Rate</th>
          <th>Lessons-Per-Week</th>
          <th>Cost-Per-Hour-Rate</th>
          <th>discount (%)</th>
          <th>Total</th>
          <th>Remove</th>
          <th>Select?</th>
        </tr>
        <tr ng-repeat="item in invoice.items">
          <td><input type="text" ng-model="item.description" class="input-small" placeholder="items name" readonly=""></td>
          <td>
            <select type="number" ng-model="item.qty" ng-required class="input-mini">
              <option value="1">1 Lesson Per Week</option>
              <option value="2">2 Lessons Per Week</option>
              <option value="3">3 Lessons Per Week</option>
              <option value="4">4 Lessons Per Week</option>
              <option value="5">5 Lessons Per Week</option>
              <option value="6">6 Lessons Per Week</option>
            </select>
          </td>
          <td><input type="number" ng-model="item.cost" ng-required class="input-mini" readonly></td>
          <td><input type="number" ng-model="item.discount" ng-required class="input-mini" readonly></td>
          <!--   <td>{{item.tax}}%</td>      -->
          <td>{{(item.hr * item.qty * item.cost) * (1 - item.discount/100) | currency}}</td>
          <td>
            <a href ng-click="removeItem($index)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
          </td>
          <td><input type="checkBox" ng-model="item.checked"></td>
        </tr>
        <tr>
          <td><a class="btn btn-info btn-sm btn-block" href ng-click="addItem()">Add Item</a></td>
          <td colspan="6"></td>
        </tr>
        <tr class="row-total">
          <td colspan="4"></td>
          <td>Total:</td>
          <td>{{total() | currency}}</td>
        </tr>

      </table>
    </div>

  </div>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
  <script src="./script.js"></script>

</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

shopping-cart