Дополнение интерпретируется как строка AngularJS

Question

У меня проблемы с добавлением двух чисел в следующем коде:

.js:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.size = {

total_size_1 : {s_size : "1st size", a : "10", b : "7"}, 
total_size_2 : {s_size : "2nd size", a : "12", b : "4"},
total_size_3 : {s_size : "3rd size", a : "11", b : "1"}
}
});

разметка:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script src="sum_test.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
<p> Select size: <select ng-model="selectedSize" ng-options="y.s_size for (x, y) in size"></select>
</p>

<span>Selected size: {{selectedSize.s_size}}</span><br />
<span>Factor: {{selectedSize.a + selectedSize.b}}</span>

Проблема заключается в {{selectedSize.a + selectedSize.b}}.Вместо добавления + b из области видимости, он просто складывает два числа вместе, как если бы это была строка 'ab'.В «1-м размере» это будет 10 + 7, что даст 17, но вместо этого будет показано 107. Как я могу решить эту проблему?

Answer 1

Ваша проблема в вашем объекте.Тип данных «чисел», которые вы пытаетесь сложить вместе, на самом деле является строками.

a = "10" //represented as a string.
b = a + a //b would equal "1010"
c = 10 //represented as an int/numerical data type
d = c + c //d would equal 20

Просто удалите кавычки, и ваш код должен работать.Вот так:

total_size_1 : {s_size : "1st size", a : 10, b : 7}

Answer 2

Разобрать как числа.

Например, как целые числа:

<span>Factor: {{parseInt(selectedSize.a) + parseInt(selectedSize.b)}}</span>