AngularJS：如何将 JSON 字符串解析为整数或浮点数以将其显示在表单编号字段中

Question

我在前端使用 AngularJS，在后端使用 Laravel。我正在将一个变量传递到名为 orderItems 的前端屏幕，其中包含以下数据到我的前端。

[{
    "item_description": "CAD Machine ",
    "qty": "1",
    "unit_price": "4000.00"
}, {
    "item_description": "Lenovo laptop",
    "qty": "1",
    "unit_price": "3000.00"
}]

我的前端包含一个文本字段和两个数字字段。文本字段中正在填充数据，数字字段中未显示任何数据。

这是我在 视图中的代码：

<table class="table table-striped table-hover table-bordered">
    <thead>
        <tr>
            <th>Description</th>
            <th>Quantity</th>
            <th>Cost</th>
            <th>Total</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in order.items">
            <td>
                {{ Form::text("description[]",null, ['ng-model' => 'item.item_description', 'class' => 'input-small form-control', 'placeholder' => 'Item description', 'required']) }}
            </td>
            <td>
                {{ Form::number("quantity[]", null, ['step' => 'any', 'ng-model' => 'item.qty', 'class' => 'input-mini form-control', 'placeholder' => 'Qty']) }}
            </td>
            <td>
                {{ Form::number("cost[]", null, ['step' => 'any', 'ng-model' => 'item.unit_price', 'class' => 'input-mini form-control', 'placeholder' => 'Unit Price', 'required']) }}
            </td>
            <td>
                <h4><% item.qty * item.cost | currency %></h4>
            </td>
            <td class="text-center">
                <h5><a href ng-click="removeItem($index)"><i class="fa fa-times"></i> Remove</a></h5>
            </td>
        </tr>
    </tbody>
</table>

这是我的控制器，我将orderItems分配给范围元素

app.controller('POEditFormController', function($scope) {
    $scope.order = {
        items: <?= $orderItems ?>
    };

    $scope.addItem = function() {
            var len = $scope.order.items.length;
            var prevItem = $scope.order.items[len - 1];
            if (prevItem.item_description == "" || prevItem.unit_price == "") {
                alert("Please enter the line details.");
            } else {
                $scope.order.items.push({
                    qty: 1,
                    item_description: '',
                    unit_price: ''
                });
            }
        },

        $scope.removeItem = function(index) {
            $scope.order.items.splice(index, 1);
        },

        $scope.total = function() {
            var total = 0;
            angular.forEach($scope.order.items, function(item) {
                total += item.qty * item.unit_price;
            })

            return total;
        }
});

由于我的知识有限，我不确定如何将qty和unit_price解析为float/integer。

Answer 1

在这种情况下您不需要解析它们。

一般情况下，Javascript 会被解释，因此在大多数浏览器中，如果您执行以下操作：

"3.5"*"2"

它会起作用的。但是，如果由于某些原因需要强制解析，可以使用：

parseFloat
parseInt

在

total += parseInt(item.qty) * parseFloat(item.unit_price);

这两个函数分别解析字符串和return解析值。

这两个是最靠谱的功能。还有其他的可能性，比如：

+ before the number (such as +"3.5")
Integer.parseInt(myNumber)

但并不是每个浏览器都能识别这些

Answer 2

@wayne 感谢您的建议，我设法通过在模型 class 上为 qty 和 unit_price

设置访问器来更改服务器响应

public function getQtyAttribute($value)
{
    return $this->attributes['qty'] = (float)$value;
}

public function getUnitPriceAttribute($value)
{
    return $this->attributes['unit_price'] = (float)$value;
}

这里是link到Laravel's Eloquent Accessors & Mutators

AngularJS：如何将 JSON 字符串解析为整数或浮点数以将其显示在表单编号字段中

AngularJS: How to parse JSON string to integer or float to display it in form number field

javascript

arrays

json

laravel

angularjs