Angularjs 表达式不适用于 ng-bind 和 {{ }}

Question

Angularjs 加法在 ng-bind 和 {{ }} 中不起作用，但乘法起作用，为什么？ 我有下面显示的代码

single_style.thread = 3;
single_style.stiching = 5;

和：

1) <td>{{single_style.thread + single_style.stiching}} </td>
2) <td>{{single_style.thread * single_style.stiching}}</td>

1) 首先我得到的答案是 35

2) 第二我得到答案为 15

即使我使用 ng-bind 它也无法正常工作，为什么？

Answer 1

更新：

问题正如建议的那样，您尝试添加导致连接的字符串，经过进一步阅读和下面显示的这篇很棒的 SO 帖子。

SO Answer

上面写着

Angular 不使用 JavaScript 的 eval() 来评估表达式。相反，Angular 的 $parse 服务会处理这些表达式。

Angular 表达式无法访问窗口、文档或位置等全局变量。这种限制是故意的。它可以防止意外访问全局状态——这是微妙错误的常见来源。

所以我们不能在尖括号中使用parseInt，我们可以在javascript函数中移动计算并从尖括号中调用它。我的解决方案是，由于 (*) 乘法运算符正在进行类型转换，只需将变量乘以 1，这样您将得到相同的数字并将数据类型转换为 number。然后计算将按预期进行。如果这能解决您的问题，请告诉我。 html 会是这样。

<td>{{single_style.thread*1 + single_style.stiching*1}} </td>

Plunkr Demo

我认为在您的场景中，变量是字符串。 + 有两种工作方式，作为数字的加法运算符和作为字符串的连接运算符，所以在你的问题中，第一种情况，运算符作为连接器工作并将 3 和 5 附加为 @ 987654331@，对于您的第二种情况，我认为乘法运算符（*）在执行操作之前正在执行type conversion，因此会发生正确的计算（15），而在第一种情况下，类型转换不会发生！

<td>{{parseInt(single_style.thread) + parseInt(single_style.stiching)}} </td>
<td>{{parseInt(single_style.thread) * parseInt(single_style.stiching)}}</td>

Answer 2

我认为我们在你的例子中遗漏了一些东西。

+ 运算符连接字符串 '3' 和 '5' 当 * 转换为 int 并进行乘法运算。 - 和 / 也会发生同样的事情

[编辑]

在渲染之前修改数据：

$scope.all_value = [];
    angular.forEach(data, function(item){       
        item.thread = parseFloat(item.thread);
        item.measure = parseFloat(item.measure);
        item.bulk_qty = parseFloat(item.bulk_qty);
        item.price = parseFloat(item.price);        
        item.pack_charge = parseFloat(item.pack_charge);
        item.label = parseFloat(item.label);
        item.elastic = parseFloat(item.elastic);
        item.button = parseFloat(item.button);         
        item.markt_price = parseFloat(item.markt_price);
        item.stiching = parseFloat(item.stiching);           

        $scope.all_value.push(item);
    })

working example Demo

工作示例

$scope.single_style ={
  thread: 3,
  stiching: 5
};

和：

<p>{{single_style.thread + single_style.stiching}} </p>
<p>{{single_style.thread * single_style.stiching}}</p> 

输出

8    
15

---

假设值被定义为字符串时的情况：

$scope.single_style ={
  thread: '3',
  stiching: '5'
};

和：

<p>{{single_style.thread + single_style.stiching}} </p>
<p>{{single_style.thread * single_style.stiching}}</p> 

输出

35    
15

解决方案

更好的方法是在控制器级别将字符串转换为int，a.e.：

$scope.single_style ={
  thread: parseInt('3'),
  stiching: parseInt('5')
};

Demo