如何讓AngularJS更新輸入值？

試圖找出爲什麼我的上一個輸入不會更新。如何讓AngularJS更新輸入值？

這裏是我的JSFiddle

我覺得有什麼毛病我的JS

function calculatorController($scope){ 
 
\t // Sixteen oz 
 
\t $scope.costPerCanSixteen = function(){ 
 
\t \t return $scope.priceSixteen/(24*$scope.casesSixteen); 
 
\t }; 
 
};

<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>

來源

2017-01-19 Pete Kang

問題不在您發佈在問題主體中的代碼中。問題在於你在HTML中聲明瞭輸入。你不能在'value'標籤中放置一個表達式，從這樣的表達式調用一個函數並不是一個好習慣。 – Claies

的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"> 
       <!-- 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>

來源

2017-01-19 04:23:17 Thailand

如何讓AngularJS更新輸入值？

回答

相關問題