当checkbox = true时

时间:2016-07-28 09:41:21

标签: javascript jquery angularjs

我一直试图解决我的问题,但我无法解决该怎么做。

My JSFIDDLE有一个建筑物级别的dropmenu。每个建筑物级别都有一个值。我有一个总价值工作,但我需要有一个毁坏的总数。我添加了一个复选框,如果它被销毁使用,但我无法弄清楚如何进行小计。我确实想到了ng-if,但无法解决如何将它与我所需要的一起使用,但我欢迎任何帮助。当checked为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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:4)

更新

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

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

实际上,这不是好方法,你应该在javascript中做逻辑。但无论如何,希望这可以解决你的问题。

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

答案 1 :(得分:0)

您可以使用ng-init将值初始化为默认值。

问题是当您执行subTotalOP+subTotalWH1时,如果subTotalWH1undefined,则返回第一个操作数(true/false)的值。初始化它也会解决它,但你应该初始化它们。

<input type="checkbox" ng-init="subTotalOP=false" ng-model="subTotalOP">

Updated JSFiddle