javascript - Angularjs 根据 true/false 标志显示计算值

Question

我需要根据标志的选择来显示值的总和(与 $scope 变量相关)。例如:

• 有 4 $scope包含整数值的变量(例如 $scope.Var_1 、 $scope.Var_2 ...)，
• 有 4 $scope包含 $scope.Var_1_Flag 的变量(例如 $scope.Var_2_Flag 、 true ...)或false对于上述每个整数变量。

所以，我们有:

$scope.Var_1 = 1 ;
$scope.Var_2 = 2 ;
$scope.Var_3 = 3 ;
$scope.Var_4 = 4 ;

$scope.Var_1_Flag = true ;
$scope.Var_2_Flag = true ;
$scope.Var_3_Flag = true ;
$scope.Var_4_Flag = true ;

然后 10 将显示，但如果:

$scope.Var_1_Flag = true ;
$scope.Var_2_Flag = false;
$scope.Var_3_Flag = false;
$scope.Var_4_Flag = true ;

然后 5 将显示。

AngularJS 是否支持可以实现这一点的绑定(bind)语法？

Answer 1

标记:

<div ng-controller="MyCtrl">
  <input type="checkbox" ng-model="Var_1_Flag" ng-checked="Var_1_Flag" ng-change="changeStatus(Var_1_Flag);" />
  <input type="checkbox" ng-model="Var_2_Flag" ng-checked="Var_2_Flag" ng-change="changeStatus(Var_2_Flag);" />
  <input type="checkbox" ng-model="Var_3_Flag" ng-checked="Var_3_Flag" ng-change="changeStatus(Var_3_Flag);" />
  <input type="checkbox" ng-model="Var_4_Flag" ng-checked="Var_4_Flag" ng-change="changeStatus(Var_4_Flag);" />  
  <br/> Sum is: {{sum}}
</div>

JS:

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

function MyCtrl($scope) {
  $scope.sum = 0;
  $scope.Var_1 = 1;
  $scope.Var_2 = 2;
  $scope.Var_3 = 3;
  $scope.Var_4 = 4;

  $scope.Var_1_Flag = true;
  $scope.Var_2_Flag = false;
  $scope.Var_3_Flag = false;
  $scope.Var_4_Flag = true;

  $scope.changeStatus = function(checkValue) {
    $scope.checkValue = !checkValue;
    $scope.calculateSum();
  }

  $scope.calculateSum = function() {
    $scope.sum = ($scope.Var_1_Flag ? $scope.Var_1 : 0) + ($scope.Var_2_Flag ? $scope.Var_2 : 0) + ($scope.Var_3_Flag ? $scope.Var_3 : 0) + ($scope.Var_4_Flag ? $scope.Var_4 : 0)
  }
  $scope.calculateSum();
}

检查这个http://jsfiddle.net/ananyaojha/ADukg/13641/

  // Need to keep track of watcher
  $scope.$watch('Var_1_Flag', function(newVal, oldVal){
     // this callback is invoked if any change is detected in the value of Var_1_Flag

    // add condition and update scope using $apply or $evalAsync
    // You have to set watchers also whenever flags are keep getting changed for all falg types.
  })