javascript - 当复选框= true时

Question

我一直在尝试解决我的问题，但我不知道该怎么做。

My JSFIDDLE有一个带有建筑级别的下拉菜单。每个建筑层都有一个值(value)。我有一个可用的总值(value)，但我需要有一个被破坏的总值(value)。我添加了一个复选框，以便在其被破坏时使用，但我不知道如何进行小计。我确实想到了 ng-if ，但无法解决如何使用它来满足我的需要，但我欢迎任何帮助。当检查为 true 时，我需要 subTotalOP 等于 OP，这样我就可以添加与总数分开销毁的所有装甲

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

function myCTRL($scope) {
  $scope.myOptionsOP = [{
    "armour": 1000,
    "label": "1"
  }, {
    "armour": 2000,
    "label": "2"
  }, {
    "armour": 4000,
    "label": "3"
  }, {
    "armour": 8000,
    "label": "4"
  }, {
    "armour": 16000,
    "label": "5"
  }, {
    "armour": 32000,
    "label": "6"
  }, {
    "armour": 64000,
    "label": "7"
  }, {
    "armour": 750000,
    "label": "8"
  }];

  $scope.myOptionsWH = [{
    "armour": 100,
    "label": "1"
  }, {
    "armour": 600,
    "label": "2"
  }, {
    "armour": 1100,
    "label": "3"
  }, {
    "armour": 1600,
    "label": "4"
  }, {
    "armour": 2100,
    "label": "5"
  }, {
    "armour": 2600,
    "label": "6"
  }, {
    "armour": 3100,
    "label": "7"
  }, {
    "armour": 3600,
    "label": "8"
  }, {
    "armour": 4100,
    "label": "9"
  }, {
    "armour": 4600,
    "label": "10"
  }, {
    "armour": 5100,
    "label": "11"
  }, {
    "armour": 9277,
    "label": "12"
  }, {
    "armour": 17280,
    "label": "13"
  }, {
    "armour": 415000,
    "label": "14"
  }];

  $scope.myOptionsLP = [{
    "armour": 450,
    "label": "1"
  }, {
    "armour": 788,
    "label": "2"
  }, {
    "armour": 1378,
    "label": "3"
  }, {
    "armour": 2412,
    "label": "4"
  }, {
    "armour": 4221,
    "label": "5"
  }];

  $scope.myOptionsSY = [{
    "armour": 2000,
    "label": "1"
  }, {
    "armour": 4000,
    "label": "2"
  }, {
    "armour": 6000,
    "label": "3"
  }];

  $scope.myOptionsDK = [{
    "armour": 550,
    "label": "1"
  }, {
    "armour": 1200,
    "label": "2"
  }, {
    "armour": 1850,
    "label": "3"
  }, {
    "armour": 2500,
    "label": "4"
  }, {
    "armour": 3150,
    "label": "5"
  }, {
    "armour": 3800,
    "label": "6"
  }, {
    "armour": 4450,
    "label": "7"
  }, {
    "armour": 5100,
    "label": "8"
  }, {
    "armour": 5750,
    "label": "9"
  }, {
    "armour": 6400,
    "label": "10"
  }, {
    "armour": 7050,
    "label": "11"
  }, {
    "armour": 9150,
    "label": "12"
  }];


};

table,
th,
tr,
td,
p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table border="1" ng-app="myExample" ng-controller="myCTRL">
  <tr>
    <td align=middle>Building</td>
    <td align=left>Level</td>
    <td align=middle>Armour</td>
    <td align=left>Destroyed</td>
    <tr>
      <td align=left width=100>Outpost:</td>
      <td>
        <select style="width: 40px" ng-model="OP" ng-options="value.armour as value.label for value in myOptionsOP"></select>
      </td>
      <td align=left width=200>Base Armour: {{OP}}</td>
      <td align=middle width=25>
        <input type="checkbox" ng-model="subTotalOP">
      </td>
      <tr>
        <td align=left width=100>Warehouse:</td>
        <td>
          <select style="width: 40px" ng-model="WH1" ng-options="value.armour as value.label for value in myOptionsWH"></select>
        </td>
        <td align=left width=200>Base Armour: {{WH1}}</td>
        <td align=middle width=25>
          <input type="checkbox" ng-model="subTotalWH1">
        </td>
        <tr>
          <td colspan="4" align=left width=300>
            <br/>
            <br/><b>Total Of Destroyed Buildings: {{subTotalOP+subTotalWH1}}</b>
          </td>
          <tr>
            <td colspan="4" align=left width=300>
              <br/><b>Total of All Buildings: {{OP+WH1}}</b>
            </td>
</table>

Answer 1

更新:

我相信这就是您所需要的:

{{(subTotalOP === true ? OP : 0)   + (subTotalWH1 === true ? WH1 : 0)}}

实际上，这不是一个好方法，您应该在 javascript 中执行逻辑。但无论如何，希望这可以解决您的问题。

检查了新的演示: https://jsfiddle.net/dLtecsbj/10/