2014-11-28 4 views
-1

это мой HTMLКак добавить 2 значения вместе с помощью угловых js?

<div data-ng-app=""> 

<p>Enter a value: <input type="text" ng-model="valueOne" value=""></p> 
<p> the first value you typed is: <span data-ng-bind="valueOne"></span> </p> 

<p> Age: <input type="text" ng-model="valueTwo" value=""></p> 
<p> the first value you typed is: <span data-ng-bind="valueTwo"></span> </p> 



<p> The sum of the values is: {{addValues()}}</p> 
</div> 

это мой JS

<script> 

function addValues($scope){ 

$scope.Math = window.Math; 
valueOne + valueTwo; 
} 
</script> 

, что нужно делать по-другому, чтобы получить нужный ответ? пока я могу получить только конкатенацию строк, но я хотел бы дать мне ответ 6, когда я ввешу 2 и 4, а не текущий ответ, который он дает, который равен 24.

ответ

0

можно попробовать это:

<!DOCTYPE html> 
<html> 

<head> 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
</head> 

<body> 

<div data-ng-app="" data-ng-controller="addValues"> 

<p>Enter a value: <input type="text" data-ng-model="valueOne" value="0"></p> 
<p> the first value you typed is: <span data-ng-bind="valueOne"></span> </p> 

<p> Age: <input type="text" data-ng-model="valueTwo" value="0"></p> 
<p> the first value you typed is: <span data-ng-bind="valueTwo"></span> </p> 



<p> The sum of the values is: {{sum()}}</p> 
</div> 


<script> 

function addValues($scope){ 
    $scope.valueOne=0; 
    $scope.valueTwo=0; 
    $scope.sum = function() { 
      return parseInt($scope.valueOne)+parseInt($scope.valueTwo); 
     } 


} 
</script> 

</body> 
</html> 
+0

это хорошо выглядит. но мой код все еще ничего не возвращает – BlueShark

+0

@BlueShark вы получаете какую-либо ошибку. Я отправил всю страницу, просто попытаюсь создать новую страницу и пройти мимо этого кода, и запустите и дайте мне знать. –

+0

сейчас работает. Спасибо чувак. – BlueShark

0

сначала ваша функция нуждается в возврате оператор, который должен возвращать результат, также где вы определяете эту функцию, откуда именно вы получили этот $ scope. Потому что, если вы хотите использовать функцию, как, что вам нужно, чтобы связать его с $ объеме, как $ scope.addValues ​​= функция() {}

так, например, внутри вашего углового контроллера вы бы

$scope.addValues = function() { 
    return $scope.valueOne + $scope.valueTwo; 
} 
0

почему вы не пытаетесь проанализировать значения до целого числа до добавления?

parseInt(valueOne) + parseInt(valueTwo) 
0

Не идеально, но вы можете изменить последнюю часть к:

<p>The sum of the values is: {{valueOne*1 + valueTwo*1}}</p> 

Это заставит valueOne и ValueTwo быть выражены в виде чисел в добавить.

Или настроить контроллер ...

var myApp = angular.module('myApp',[]); 

    myApp.controller('ctrlAdd', ['$scope', function($scope) { 
     $scope.valueOne = 0; 
     $scope.valueTwo = 0; 

     $scope.result = function(){ 
     return parseInt($scope.valueOne) + parseInt($scope.valueTwo); 
     } 
    }]); 

и изменить HTML ...

<body> 
    <div data-ng-app="myApp" ng-controller="ctrlAdd"> 
    <p>Enter a value: 
     <input type="text" ng-model="valueOne" value="" /> 
    </p> 
    <p>the first value you typed is: <span data-ng-bind="valueOne"></span> 
    </p> 
    <p>Age: 
     <input type="text" ng-model="valueTwo" value="" /> 
    </p> 
    <p>the first value you typed is: <span data-ng-bind="valueTwo"></span> 
    </p> 
    <p>The sum of the values is: {{result()}}</p> 
    </div> 
</body> 

См Plunker

+0

Я действительно думал, что это сработает, но это j ust возвращает это.

Сумма значений: {{result()}}

BlueShark

+0

Кажется, что вы не ссылаетесь на «AngularJS»? у вас есть ссылка на файл сценария? простой способ проверить ... просто поместите '{{2 + 4}}' в html и посмотрим, что это такое. – christiandev

Смежные вопросы