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和{ {1}} 5，对于您的第二种情况，我认为乘法运算符（35）在执行操作之前正在执行*，因此会进行正确的计算（type conversion），而在第一种情况下，类型转换没有发生！

Answer 2

我想我们会错过你的例子。

当+转换为int并进行乘法运算时，

'3'运算符会将字符串'5'和*连接起来。对于-和/

，同样的事情将会悄然发生

<强> [编辑]

在渲染数据之前修改数据：

$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

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

2 个答案:

工作示例

假设您的情况是将值定义为字符串：

解决方案