如何在Angular.js中的$http.post之后从字符串转换和计算值答案

【问题标题】：How to convert and calculate value from string to number after of $http.post in Angular.js如何在Angular.js中的$http.post之后从字符串转换和计算值
【发布时间】：2016-01-26 04:18:15
【问题描述】：

我试图弄清楚如何转换和计算字符串，在这种情况下，我使用 $http.post 调用 ajax“订单/列表”来获取这样的列表，它包含 3 个对象：

{
"orders":[
    {
        "id_order":"206",
        "shipping":"100.00",
        "tax":"35.00"
    },
    {
        "id_order":"205",
        "shipping":"160.00",
        "tax":"16.00"
    },
    {
        "id_order":"204",
        "shipping":"100.00",
        "tax":"16.00"
    }

]
}

税收是一个百分比，然后我使用 ng-repeat 显示订单列表：

<tr ng-repeat="order in orders">
    <td>{{order.id_order}}</td>
    <td>$ {{(order.shipping * (order.tax/100) ) + order.shipping }}</td>
</tr>

您看到 {{(order.shipping * (order.tax/100) ) + order.shipping }} 我需要将它们转换为数字并计算，例如运费为 100.00，税为 16.00，例外结果将是 116.00，而不是 16100.00

【问题讨论】：

你的属性是字符串，而不是数字，所以你不能用它们做数学运算
克莱斯的评论是正确的。 AngularJS 对此非常敏感，如果属性包含字符串而不是数字，则不会执行计算。知道从哪里获取这些数据会很有帮助，因为最好从源中正确获取 JSON，而不是在 Javascript 中转换数据。例如，如果是 PHP，您可以强制 json_encode 使用正确的数据类型。
@Claies 你根本没有像我问的那样阅读“如何将...转换为字符串中的数字”

标签： javascript angularjs

【解决方案1】：

可能有一个更惯用的 AngularJS 答案。同时，请查看parseFloat，因为您的 JSON 对象返回的是字符串（它们是双引号）而不是数值：

var shipping = "100.00";
var tax = "16.00";

(parseFloat(shipping) * (parseFloat(tax)/100) ) + parseFloat(shipping);
// 116

或者在 Angular 中：

<tr ng-repeat="order in orders">
    <td>{{order.id_order}}</td>
    <td>$ {{(parseFloat(order.shipping) * (parseFloat(order.tax)/100) ) + parseFloat(order.shipping) }}</td>
</tr>

如果您能够控制从中检索 JSON 数据的 API，您可能需要考虑输出数值（不要引用它们）。

另请注意，parseFloat() 将去除尾随的十进制零（仅用于表示科学精度）：

> tax = "16.00";
'16.00'
> parseFloat(tax);
16
> tax = "16.0001";
'16.0001'
> parseFloat(tax);
16.0001

【讨论】：

但是如何从 JSON 数据中获取 2 个变量作为运费和税金作为 3 个对象并逐字呈现 {{orders.calculatedTax}} 这是 angular.js，而不是 Javascript 解决方案
@Ivan 正如我在第一个示例中所展示的，您将 parseFloat() 包裹在您的 JSON 值周围......我更新了我的答案。不过，您关于这是 AngularJS 而不是 JavaScript 的说法有点令人费解。
您更新的答案返回为“null” AngularJS 在 {{ }} 中不起作用 JS 表达式

【解决方案2】：

试试看这里 https://jsfiddle.net/z5gnhzt2/

 $scope.calculate = function(shipping, tax){
        return parseFloat(shipping) * parseFloat(tax)/100 + parseFloat(shipping);
    };

 <td>$ {{calculate(order.shipping, order.tax)}}</td>

【讨论】：

这绝对是一个很好的答案，计算函数将是可以放置在任何地方的灵活解决方案，谢谢！

【解决方案3】：

如果你真的想在视图中进行计算，你可以使用“数字过滤器”

{{ (order.shipping | number) * (order.tax | number)/100 }}

演示：http://jsfiddle.net/jkrielaars/kde0mxpe/4/

但是，我建议在您的控制器中进行这些计算，并保持视图的逻辑清晰。

angular.forEach($scope.orders, function(order) {
        order.shippingIncTax = parseInt(order.shipping)*(parseInt(order.tax)/100);
    });

【讨论】：

【解决方案4】：

使用中间函数，就像这个小例子：

$scope.test = [
  { a : '23', b : '45' },
  { a : '3', b : '4' }    
]

$scope.doCalc = function(a,b) {
  return parseInt(a)*parseInt(b);
}

标记：

<table> 
  <thead>
    <tr><th>calc</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="c in test">
      <td>
        {{ doCalc(c.a, c.b) }}
      </td>
    </tr>
  </tbody>
</table>

http://plnkr.co/edit/kIXOQ7B3OMrdypqaTz39?p=preview

【讨论】：

【解决方案5】：

数学可以简化为：

{{order.shipping * (1 + order.tax / 100) | currency}}

这样就避免了添加字符串的问题。

这里是the fiddle

作为旁注，我个人建议使用 REST Api 以获取数字而不是字符串。我们在客户端看到太多补丁或重新格式化，但可以从源头纠正。

【讨论】：

这太难了，我用过 {{order.shipping * (order.tax / 10) + ".00"}} 但我不会用 :P
顺便说一句，您可以使用currency 过滤器。
关于“.00”用于小数为分，是为了显示，没有理由使用分。
小数和货币符号应由货币过滤器处理。见updated fiddle
感谢您的想法，我不知道货币过滤器

【解决方案6】：

如果您还没有将它们转换为数字，您是如何获得 16100.00 的值的？

(order.shipping * (order.tax/100)) + order.shipping

如果转换成数字有问题，可以尝试阅读this post。

【讨论】：

显然是“200”和“300”这样的字符串，可以加成“200300”，如果数字不是字符串，那就是500
那不应该是……“16.00100.00”吗？ ;)
是的，有时我会打错字