Question

我正在尝试做这样的事情：

<form name="myForm" ng-controller="Ctrl">
      Value1: <input type="checkbox" ng-number="100"> <br/>
      Value2: <input type="checkbox" ng-number="250"

      add 5% to the total sum of the checked boxes: <input type="checkbox" ng-percent=".05"
     <br/>

     total value = {{how do you do this?}}
 </form>

因此，如果选中Value1，则总值为“100”，如果检查两个值均为“350”，或者如果同时检查“添加5％”，则：总值=（{{总和}} + （{{total sum}} * .05））

我可以用jQuery做到这一点，但是我无法绕过如何以'Angular'的方式做到这一点。

Answer 1

我认为这正是您所寻找的：http://plnkr.co/edit/WNsjwMuBw2kDBaR7PLRy?p=preview

您需要使用input在$scope元素与ng-model上的某些布尔值之间进行双向绑定：

  <div><label><input type="checkbox" ng-model="opts.val1" /> Value 1</label></div>
  <div><label><input type="checkbox" ng-model="opts.val2" /> Value 2</label></div>
  <div><label>add 5% to the total sum of the checked boxes: <input type="checkbox" ng-model="opts.val3" /></label></div>

在controller：

$scope.opts = {
 val1: false,
 val2: false,
 val3: false
};

然后，您可以将总价值公开为$scope上的函数，并按照您的建议将其绑定到使用{{...}}的HTML：

  <label>Total: {{ computedTotal() }}</label>

在控制器中：

$scope.computedTotal = function () {
  // You can make the values configurable as well by exposing them on the $scope
  // and binding them to input tags using ng-model
  var opts = $scope.opts;
  var total = (opts.val1 ? 100 : 0) + (opts.val2 ? 250 : 0);
  var perc = opts.val3 ? 1.05 : 1;
   return perc * total;
};

如何使用复选框和Angular计算值？

1 个答案: