Angular JS math with values

Question

I am trying to gather values using angularJS and do some math with them. I have tried the following but did not work, I am very new at angularJS and I have a jsFiddle (I dont know how to get angularJS working on JSFiddle)

Does anyone know what I am doing wrong?

Here is my code:

<body ng-app="myApp" ng-controller="WizardController">
<wizard on-before-step-change="log(event)" on-step-changing="log(event)" on-after-step-change="log(event)">

    <step title="stepOne">
        <input type="text" ng-model="user.a" />
        <input type="text" ng-model="user.b" />
        <input type="text" ng-model="user.c" />
        {{totalNumber}}
    </step>

</wizard>    
</body>



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

myApp.controller('WizardController', ['$scope', function($scope){

  $scope.user = { };
  $scope.totalNumber = $scope.user.a * $scope.user.b * 50 + $scope.user.c - $scope.user.a;

}]);

if I do $scope.totalNumber = $scope.user, and then {{totalNumber}} i get this returned: {"a":"1"} (if I have <input type="text" ng-model="user.a">) but when I do $scope.user.a nothing displays this is very frusturating

The answer below is probably it, but as a further tip, you can use type="number" rather than type="text" to make these fields numeric. — Swanny
– Swanny, Commented May 21, 2014 at 3:55

Platinum Azure · Accepted Answer · 2014-05-21 03:52:16Z

2

JavaScript is generally case-sensitive. You probably wanted this in your HTML:

{{ totalNumber }}

answered May 21, 2014 at 3:52

Platinum Azure

46.4k13 gold badges112 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Terry Over a year ago

OP: This is correct, you will need to match the case of your scope. However your Fiddle is overly complex and has a number of issues that are keeping it from working regardless of whether you include Angular properly and update this binding.

Terry · Accepted Answer · 2014-05-21 04:02:41Z

1

If you are new to Angular, start with this Fiddle. It shows very simply how to load Angular (check the left sidebar) and how to work with numbers from the scope.

HTML

<div ng-app="myApp" ng-controller="AppCtrl">
    <input type="text" ng-model="num1" />
    <input type="text" ng-model="num2" />
    {{ total() }}
</div>

JS

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

app.controller('AppCtrl', function ($scope) {
    $scope.num1 = 10;
    $scope.num2 = 23;

    $scope.total = function() {
        return $scope.num1 * $scope.num2;
    }
});

answered May 21, 2014 at 4:02

Terry

14.2k9 gold badges58 silver badges84 bronze badges

2 Comments

user3618922 Over a year ago

it makes no sense why $scope.totalNumber = $scope.user works, but not $scope.user.a

Terry Over a year ago

$scope.totalNumber is a primitive value so it can bind to the scope right away. $scope.user = {} is an object. $scope.user can bind to the scope, but $scope.user.a does not exist when the scope is created, so there is no reference to bind. That being said, using objects is recommended by Angular but you still need to understand how to use them.

Community · Accepted Answer · 2017-05-23 10:26:18Z

1

1 way:
Remove: {{totalNumber}}
Put: {{user.a * user.b * 50 + user.c - user.a}}

2 way like Terry said:
script:
$scope.totalNumber = function(){
return $scope.user.a * $scope.user.b * 50 + $scope.user.c - $scope.user.a;
}
html:
{{totalNumber()}}

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered May 21, 2014 at 4:47

Willian Lopes

1731 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular JS math with values

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related