Question

试图找出为什么我的上一次输入不会更新。

这是我的

我觉得我的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>

Answer 1

<强>的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);
        };
    });

另一种方式...... 的的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">  <input type="text" ng-model="priceSixteen"/> <input type="text" ng-model="casesSixteen"/> Total: <span>{{costPerCanSixteen() | currency}}</span> </div> </form>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="script.js"></script> </body> </html>

如何使AngularJS更新输入值？

1 个答案: