Angularjs根据真/假标志显示计算值答案

【问题标题】：Angularjs displaying a calculated value depending on true/false flagsAngularjs根据真/假标志显示计算值
【发布时间】：2017-08-03 06:35:32
【问题描述】：

我需要根据标志的选择显示值的总和（与$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 是否支持实现这一点的绑定语法？

谢谢。

【问题讨论】：

你不能创建一组对象吗？每个对象都可以有 var 值和标志。然后我们可以使用 JS 内置的函数来更轻松地得到总和。我不确定这是否适合您的情况，请告诉我。谢谢
技术上是的，但这是个坏主意，因为这些计算的结果用于填充具有动态大小的表。

标签： javascript angularjs

【解决方案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.
  })

【讨论】：

这可以是一种方式
谢谢你的建议。问题是用户可以打开和关闭标志（复选框）并且需要更新结果。问题的第二部分是这些计算的 值填充了一个相对较大的表。我知道在 HTML 标记中可以进行一些计算，但我不确定语法。
我们可以创建一个 sum 函数，可以在更改复选框时调用它，从而得到正确的结果
是的，我的意思是无论谁投了反对票，他们都应该在评论中解释。只有我们才能改进我们的答案
Slaker，请看我发布的答案。它似乎要简单得多，并且确实提供了所需的结果。但是，我会投票赞成。感谢您的努力。

【解决方案2】：

你必须watch范围变量

$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
})

您可以设置更多观察者或将所有标志变量添加到一个对象中，然后观察该对象，这样您就不必为每个范围变量使用不同的回调

【讨论】：

你好赛义德。请看一下我发布的解决方案（标记为答案）。完全没有$watch，我工作得很好。

【解决方案3】：

创建具有值和标志属性的对象数组。并创建过滤器以仅检查这些值的标志和总和。

$scope.sumArray = [
    {value:1,flag:true},
    {value:2,flag:false},
    {value:3,flag:false},
    {value:4,flag:true}
];

【讨论】：

您能否添加一个示例，说明过滤器的外观以及如何在页面中设置此过滤器？请注意，数据将用于填充可能很大的表。每个单元格将包含 4 个数字（不同单元格的不同集），而 4 个标志是全局的（即所有单元格的标志设置相同）。
您没有添加确切的要求，它需要适用。但是代码是由下面的@korcan 添加的。只添加那些具有 true 标志的值.. rest 将被过滤。

【解决方案4】：

您可以改为将函数分配给 $scope.variable..使它更容易..希望这就是您要寻找的

angular.module('myApp', [])
  .controller('MainCtrl', function($scope) {
    $scope.Var_1_Flag = true;
    $scope.Var_2_Flag = false;
    $scope.Var_3_Flag = true;
    $scope.Var_4_Flag = true;

    $scope.var_1 = function() {
      if ($scope.Var_1_Flag) {
        return 1;
      } else {
        return 0;
      }
    }
     $scope.var_2 = function() {
      if ($scope.Var_2_Flag) {
        return 2;
      } else {
        return 0;
      }
    }


  });

<body ng-app="myApp" ng-controller="MainCtrl">
  <div>
    <span>{{var_1() + var_2()}} </span> 
  </div>
</body>

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

【讨论】：

感谢 Sushil 提供的这种非常有趣的方法。它的问题是需要使用这种类型的计算来填充一个相当大的表和动态表；因此，我怀疑这样做是否可行（尽管我会在其他情况下接受它）。
@FDavidov 我同意 :) .. 这是一个小数据

【解决方案5】：

在你的控制器中：

$scope.sumValues =0;
var Values =[
  {v:1,f:true},
  {v:2,f:false},
  {v:3,f:false},
  {v:4,f:true}];
Values.forEach(function(element) {    
   if(element.f)
        $scope.sumValues += element.v;
});

在你的 HTML 中：

<div ng-controller="MyCtrl"> 
   {{sumValues}}
</div>

我为你创建一个例子：

http://jsfiddle.net/ADukg/13643/

【讨论】：

【解决方案6】：

$scope.sumArray = [
    {value:1,flag:true},
    {value:2,flag:false},
    {value:3,flag:false},
    {value:4,flag:true}
];

function sum(){
  $scope.sum =0;
  for(var i=0;i<$scope.sumArray.length;i++){
     $scope.sum = $scope.sum + 
        $scope.sumArray[i].flag ? $scope.sumArray[i].value: 0 
  }
}

$scope.$watch('$scope.sumArray', sum,true);

or :

you can use $filter

function sum(){
  $scope.sum=0;
  var filtered = $filter('filter')($scope.sumArray,'flag');
  for(var i=0;i<filtered.length;i++){
     $scope.sum = $scope.sum+filtered[i].value;
  }
}

【讨论】：

顺便说一句，您可以使用复选框更改视图上的标志，此解决方案适用于长度大于 4 的数组。

【解决方案7】：

您只需要一个 $watch 来更新 sum 的值。一起观察所有标志，只要复选框（标志）发生变化，总和就会自动更新。

var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller("MyCtrl", function($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.$watch('Var_1_Flag + Var_2_Flag + Var_3_Flag +Var_4_Flag', function(val) {
        $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);
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <h6>
CheckBoxes
</h6>
    <input type="checkbox" ng-model="Var_1_Flag">
    <input type="checkbox" ng-model="Var_2_Flag">
    <input type="checkbox" ng-model="Var_3_Flag">
    <input type="checkbox" ng-model="Var_4_Flag">
    <h6>
Sum
</h6> {{sum}}
</div>

【讨论】：

【解决方案8】：

我找到了一个非常简单的解决方案，可以完全按照我的意愿完成工作。

这是控制器中的一段代码：

$scope.Test_1_Value = 1     ;
$scope.Test_1_Flag  = true  ;

$scope.Test_2_Value = 2     ;
$scope.Test_2_Flag  = true  ;

$scope.Test_3_Value = 3     ;
$scope.Test_3_Flag  = true  ;

$scope.Test_4_Value = 4     ;
$scope.Test_4_Flag  = true  ;


$scope.ConditionalAdd = function (p1,p2,p3,p4) {
    var aaa = 0 ;
    if ($scope.Test_1_Flag) {aaa = aaa + $scope.Test_1_Value }
    if ($scope.Test_2_Flag) {aaa = aaa + $scope.Test_2_Value }
    if ($scope.Test_3_Flag) {aaa = aaa + $scope.Test_3_Value }
    if ($scope.Test_4_Flag) {aaa = aaa + $scope.Test_4_Value }
    return aaa ;
}

这里是 HTML 部分：

    <input type="checkbox" ng-model="Test_1_Flag"> Add 1
    <br>
    <input type="checkbox" ng-model="Test_2_Flag"> Add 2
    <br>
    <input type="checkbox" ng-model="Test_3_Flag"> Add 3
    <br>
    <input type="checkbox" ng-model="Test_4_Flag"> Add 4
    <br>
    <label>Total 1: </label> {{ConditionalAdd(Test_1_Value,Test_2_Value,Test_3_Value,Test_4_Value)}}

随着复选框的更改（选中/取消选中），Total 1: 旁边显示的结果会根据需要自动更新。

值Test_x_Value 是为创建和填充表格（使用ng-repeat）而生成的数据的一部分，因此在表格的每个单元格中都可用。

所以，没有过滤器，没有手表。

感谢大家的支持:-)。

编辑：

我刚刚完成了此解决方案的实施，并使用包含超过 2,500 个单元格的表格对其进行了测试。此解决方案运行良好，包括性能。

【讨论】：

这个答案可能会解决问题，但性能会很差。不建议从视图stackoverflow.com/questions/29474445/…调用函数。
我会看看性能如何（以及是否）受到显着影响，如果是，将返回此问题/答案并根据观察结果对其进行更新。我可以尝试的另一件事是将其设置为单向绑定（即使用 : 字符），因为数据总是从逻辑到 HTML，而不是其他方式。我们拭目以待。
@Vivz，我检查了你的观点（表现不佳），我根本看不到任何问题。请参阅 EDIT: 包含超过 2,500 个单元格的表，其中大多数包括计算，并且响应时间大致相同（即我测试了有无计算的更新 - 已注释掉 - 并且无法检测性能的任何变化）。