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

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

您需要在元素和usinginput上的一些布尔值之间进行双向绑定：$scopeng-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;
};