laravel AngularJS：如何将 JSON 字符串解析为整数或浮点数以在表单编号字段中显示它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28038168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: How to parse JSON string to integer or float to display it in form number field
提问by Kevin Reynolds
I am using AngularJS for my front-end and Laravel for the back-end. I am passing a variable to front-end screen called orderItemswhich contains the following data to my front-end.
我的前端使用 AngularJS，后端使用 Laravel。我将一个变量传递给前端屏幕orderItems，其中包含以下数据到我的前端。
[{
"item_description": "CAD Machine ",
"qty": "1",
"unit_price": "4000.00"
}, {
"item_description": "Lenovo laptop",
"qty": "1",
"unit_price": "3000.00"
}]
My front-end contains one text field and two number fields. Data is getting populated on text field and no data is showing up on number field.
我的前端包含一个文本字段和两个数字字段。文本字段中填充了数据，而数字字段中没有显示数据。
Here is my code from the view:
这是我的代码：
<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>
Here is my controllerwhere I assign orderItemsto the scope element
这是我分配给范围元素的控制器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;
}
});
Because of my limited knowledge, I am not sure how to parse the qtyand unit_priceto float/integer.
由于我的知识有限，我不确定如何解析qty和unit_price浮点数/整数。
采纳答案by Kevin Reynolds
@wayne thanks for the suggestion, I managed to change the server response by setting up the accessors on the model class for qty and unit_price
@wayne 感谢您的建议，我设法通过在模型类上为 qty 和 unit_price 设置访问器来更改服务器响应
public function getQtyAttribute($value)
{
return $this->attributes['qty'] = (float)$value;
}
public function getUnitPriceAttribute($value)
{
return $this->attributes['unit_price'] = (float)$value;
}
Here is the link to Laravel's Eloquent Accessors & Mutators
回答by Michael
You don't need to parse them in this case.
在这种情况下，您不需要解析它们。
In general, Javascript is interpreted, so in most browsers if you do the following:
一般来说，Javascript 是解释性的，因此在大多数浏览器中，如果您执行以下操作：
"3.5"*"2"
It will work. However, if for some reasons you need to force the parsing, you can use:
它会起作用。但是，如果由于某些原因需要强制解析，则可以使用：
parseFloat
parseInt
In
在
total += parseInt(item.qty) * parseFloat(item.unit_price);
These are two functions which respectively parse the string and return the parsed value.
这是两个函数，分别解析字符串并返回解析后的值。
These two are the most reliable functions. There are others possibilities, such as:
这两个是最可靠的功能。还有其他可能性，例如：
+ before the number (such as +"3.5")
Integer.parseInt(myNumber)
But these are not recognized in every browser
但是这些并不是每个浏览器都能识别的
