How do I make AngularJS update input values?

Question

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

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>

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
– Claies, Commented Jan 19, 2017 at 3:53

Thailand · Accepted Answer · 2017-01-19 05:03:05Z

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>

Collectives™ on Stack Overflow

How do I make AngularJS update input values?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related