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

我需要根据标志的选择显示一系列值（与

$scope

变量相关）。例如：

• 有4个

  $scope

  变量（例如

  $scope.Var_1

  ，

  $scope.Var_2

  …）包含整数值
• 有4个

  $scope

  变量（例如

  $scope.Var_1_标志

  ，

  $scope.Var_2_标志

  …）包含上述每个整数变量的

  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是否支持能够实现这一点的绑定语法

---

谢谢。

您必须

查看范围变量

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

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

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

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

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

检查这个

标记：

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

检查这个

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

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

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

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

您可以改为将$scope.variable.赋值给函数。这样会更容易。希望这就是您想要的


angular.module（'myApp'，[]）
.controller（'MainCtrl'，函数（$scope）{
$scope.Var_1_Flag=true；
$scope.Var_2_Flag=false；
$scope.Var_3_Flag=true；
$scope.Var_4_Flag=true；
$scope.var_1=函数（）{
if（$scope.Var\u 1\u标志）{
返回1；
}否则{
返回0；
}
}
$scope.var_2=函数（）{
if（$scope.Var\u 2\u标志）{
返回2；
}否则{
返回0；
}
}
});

{{var_1（）+var_2（）}}
您可以将$scope.variable.赋值给函数。这样更简单。希望这就是您想要的


angular.module（'myApp'，[]）
.controller（'MainCtrl'，函数（$scope）{
$scope.Var_1_Flag=true；
$scope.Var_2_Flag=false；
$scope.Var_3_Flag=true；
$scope.Var_4_Flag=true；
$scope.var_1=函数（）{
if（$scope.Var\u 1\u标志）{
返回1；
}否则{
返回0；
}
}
$scope.var_2=函数（）{
if（$scope.Var\u 2\u标志）{
返回2；
}否则{
返回0；
}
}
});

{{var_1（）+var_2（）}}
在控制器中：

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


{{sumValues}}

我为您创建了一个示例：

在控制器中：

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


{{sumValues}}

我为您创建了一个示例：

$scope.sumArray=[
{value:1，flag:true}，
{值：2，标志：false}，
{值：3，标志：false}，
{值：4，标志：true}
];
函数和（）{
$scope.sum=0；
对于（变量i=0；i
$scope.sumArray=[
{value:1，flag:true}，
{值：2，标志：false}，
{值：3，标志：false}，
{值：4，标志：true}
];
函数和（）{
$scope.sum=0；
对于（var i=0；i您只需一个$watch即可更新sum的值。同时查看所有标志，每当复选框（标志）更改时，sum将自动更新


var myApp=angular.module（'myApp'，[]）；
//指令（'myDirective'，function（）{}）；
//工厂（'myService'，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.$watch（'Var_1_标志+Var_2_标志+Var_3_标志+Var_4_标志），函数（val）{
$scope.sum=（$scope.Var_1_标志？$scope.Var_1:0）+（$scope.Var_2_标志？$scope.Var_2:
0）+（$scope.Var_3_标志？$scope.Var_3:0）+（$scope.Var_4_标志？$scope.Var_4:
0);
})
})

复选框
总和
{{sum}}
您只需一个$watch即可更新sum的值。同时查看所有标志，每当复选框（标志）更改时，sum将自动更新


var myApp=angular.module（'myApp'，[]）；
//指令（'myDirective'，function（）{}）；
//工厂（'myService'，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.$watch（'Var_1_标志+Var_2_标志+Var_3_标志+Var_4_标志），函数（val）{
$scope.sum=（$scope.Var_1_标志？$scope.Var_1:0）+（$scope.Var_2_标志？$scope.Var_2:
0）+（$scope.Var_3_标志？$scope.Var_3:0）+（$scope.Var_4_标志？$scope.Var_4:
0);
})
})

复选框
总和
{{sum}}
我找到了一个非常简单的解决方案，完全按照我的要求完成了工作

以下是控制器中的一段代码：

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

添加1


加2


加3


加4


总计1:{{ConditionalAdd（Test_1_值、Test_2_值、Test_3_值、Test_4_值）}

当复选框更改（选中/未选中）时，
Total 1:
旁边显示的结果将自动更新