current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

Trying to figure out why my last input won't update.

Here's my JSFiddle

https://jsfiddle.net/Lzcvukq8/

I think there's something wrong with my JS

function calculatorController($scope){
	// Sixteen oz
	$scope.costPerCanSixteen = function(){
		return $scope.priceSixteen/(24*$scope.casesSixteen);
	};
};
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <div id="sixteen-oz" ng-controller="calculatorController">
      <div class='hr'></div>
      <h1>One</h1>
      <form class="form-horizontal">
        <div class="form-group">
          <label for="inputCases" class="col-sm-6 control-label">Amount of Cases</label>
          <div class="col-sm-offset-1 col-sm-5">
            <input type="number" min="0.01" step="0.01" max="2500" class="form-control" ng-model="casesSixteen"/>
          </div>
        </div>
        <div class="form-group">
          <label for="inputCost" class="col-sm-6 control-label">Cost Per Case</label>
          <div class="col-sm-offset-1 col-sm-5">
            <input type="number" min="0.01" step="0.01" max="2500" class="form-control" placeholder="29.40" ng-model="priceSixteen"/>
          </div>
        </div>
        <div class="form-group">
          <label for="canCost" class="col-sm-6 control-label">Cost Per Can</label>
          <div class="col-sm-offset-1 col-sm-5">
            <input type="text" class="form-control answer-to-input" value="{{ costPerCanSixteen() }}"/>
          </div>
        </div>
      </form>
    </div>

share|improve this question
    
the problem isn't in the code you posted in the question body at all. The problem is in the way that you declared the input in your HTML. You can't put an expression in the value tag, and it's not really good practice to call a function from an expression like this anyway. – Claies Jan 19 at 3:53
up vote 2 down vote accepted

index.html

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/app.js"></script>

    <body>

    <div ng-app="myApp" ng-controller="calculatorController">
    <input type="text" ng-model="priceSixteen"/>
    <input type="text" ng-model="casesSixteen"/>
    <button ng-click="costPerCanSixteen()">click</button>
    <p>{{costPerCanSixteen}}</p>
    </div>

    </body>
    </html>

app.js

 var app = angular.module("myApp", []);
    app.controller("calculatorController", function($scope) {    

        $scope.costPerCanSixteen = function(){
            var priceSixteen = $scope.priceSixteen;
           var casesSixteen = $scope.casesSixteen;

            $scope.costPerCanSixteen = priceSixteen/(24*casesSixteen);
        };
    });

another way.. script.js

function calculatorController($scope){

    $scope.costPerCanSixteen = function(){
      var costPerCanSixteen = 0;
      var priceSixteen = $scope.priceSixteen;
      var casesSixteen = $scope.casesSixteen;

      costPerCanSixteen = priceSixteen/(24*casesSixteen);

      return costPerCanSixteen;
    };
}

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"/>
    </head>

    <body ng-app ng-controller="calculatorController">

        <form>
            <div class="total">
                <!-- Calculate the total price of all chosen services. Format it as currency. -->
                <input type="text" ng-model="priceSixteen"/>
                <input type="text" ng-model="casesSixteen"/>
                Total: <span>{{costPerCanSixteen() | currency}}</span>
            </div>

        </form>

        <!-- Include AngularJS from Google's CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.