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

yhived7q 于 2023-04-28 发布在 Angular

关注(0)|答案(8)|浏览(256)

我需要根据标志的选择显示值的总和（与$scope变量相关）。例如：

有4个$scope变量（e。如$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是否支持实现这一点的绑定语法？

angularjs

来源：https://stackoverflow.com/questions/45476598/angularjs-displaying-a-calculated-value-depending-on-true-false-flags

8条答案

按热度按时间

mcdcgff01#

标记：

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

赞(0）回复(0）举报 2023-04-28

csga3l582#

你必须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
})

你可以设置更多的监视器，或者将所有的标志变量添加到一个对象中，然后监视这个对象，这样你就不必为每个作用域变量使用不同的回调函数

赞(0）回复(0）举报 2023-04-28

8yoxcaq73#

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

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

赞(0）回复(0）举报 2023-04-28

kfgdxczn4#

相反，你可以将函数赋值给$scope。变量..使它更容易。.希望这就是你要找的

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>

赞(0）回复(0）举报 2023-04-28

vddsk6oq5#

在您的控制器中：

$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/

赞(0）回复(0）举报 2023-04-28

vsdwdz236#

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

赞(0）回复(0）举报 2023-04-28

pnwntuvh7#

你只需要One $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>

赞(0）回复(0）举报 2023-04-28

gzjq41n48#

我发现了一个惊人的简单的解决方案，完全按照我想要的工作。
下面是控制器中的一段代码：

$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多个单元格的表对其进行了测试。这个解决方案工作得非常好，包括性能。

赞(0）回复(0）举报 2023-04-28

我来回答

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

8条答案

相关问题

热门标签

最新问答