AngularJS 双向绑定。返回用户插入的输入答案

【问题标题】：AngularJS two-way binding. Returning user inserted inputAngularJS 双向绑定。返回用户插入的输入
【发布时间】：2017-01-01 22:43:04
【问题描述】：

用户在 HTML 中插入值：

</div>`<div ng-app="xpCalc" ng-controller="Xp Calculator">

<p>Insert your current Level  <input type="number" ng-model="currentLevel"></p>

<h2>{{$scope.currentXp}}</h2>

</div>`

而我的js脚本计算并返回结果：

var app=angular.module('xpCalc', []);
app.controller('Xp Calculator', function($scope){
$scope.currentLevel;
$scope.currentXp=function(){
    var output=0;
    for (var thisLVL =1; thisLVL >= $scope.currentLevel; thisLVL++) {
        return output += ( Math.floor ( thisLVL + 300 * Math.pow( 2, thisLVL / 7 ) ) / 4 );
    }}});

但不知何故，我在视图中看不到结果。有什么问题？

【问题讨论】：

首先你不需要在{}中使用$scope，其次currentXp是一个方法，所以你必须使用currentXp()
有一些问题，但为了帮助你，我需要了解你想要做什么。您是否尝试对用户的输入进行某种计算？
会不会是因为您的 return 在实际计算输出之前就中断了循环？
Randi Radcliff，是的，我正在对用户输入进行某种计算。
@OsmanCea：不，你不能那样打破for循环......

标签： javascript html angularjs input return

【解决方案1】：

使用

<div ng-app="xpCalc" ng-controller="xpCalculatorController">

<p>Insert your current Level  <input type="number" ng-model="currentLevel"></p>

<h2>{{currentXp()}}</h2>

</div>

和

var app=angular.module('xpCalc', []);
app.controller('xpCalculatorController', function($scope){
$scope.currentLevel = 1;
$scope.currentXp=function(){
    var output=0;
    for (var thisLVL =1; thisLVL <= $scope.currentLevel; thisLVL++) {
        output += ( Math.floor ( thisLVL + 300 * Math.pow( 2, thisLVL / 7 ) ) / 4 );
    }
    return output;
  }
});

注意：您的循环运算符 >= 被反转且无限，更改为 <=。另外，你不能用空格命名你的控制器Xp Calculator...

见https://plnkr.co/edit/BMomweYVGLlTsv2tTjfS?p=preview

【讨论】：

循环一直持续到它达到插入的值，比如 50，然后它停止。该值是从 1 到 50 的所有级别的总和。我尝试了您的方法，但它仍然显示 {{currentXp()}}
我把>=改成了<=
是的，它适用于 pllunkr，但不知何故我无法在我的 index.html 页面上显示，我使用的文本编辑器是 sublime 3。但是知道代码很好，我真的很感谢你

【解决方案2】：

我会做这样的事情

angular.module('xpCalc')
  .controller('FooCtrl', function($scope) {
       $scope.calculate = function(currentLevel) {
           $scope.currentXp = 0;
           for (var thisLVL = 1; thisLVL <= currentLevel; thisLVL++) {
               $scope.currentXp += (Math.floor(thisLVL + 300 * Math.pow(2, thisLVL / 7)) / 4);
           }
       };
  });

并在视图中放置一个触发它的按钮

  <div ng-controller="FooCtrl">
     <p>Insert your current Level
         <input type="number" ng-model="currentLevel">
     </p>
     <button type="button" ng-click="calculate(currentLevel)">Calcular</button>
     <div ng-show="currentXp !== undefined">
         <h2>{{currentXp}}</h2>
     </div>
  </div>

【讨论】：

【解决方案3】：

解决方案：

HTML：

<p>Insert your current Level  <input type="number" ng-model="currentLevel"></p>
<h2>{{currentXp()}}</h2>

JAVASCRIPT：

$scope.currentLevel;
$scope.currentXp=function(){
   if ($scope.currentLevel) {
     var output=0;        
     for (i =1; i < $scope.currentLevel; i++) {
         output += ( Math.floor ( i + 300 * Math.pow( 2, i / 7 ) ) / 4 );
     }
     return output
   }
}

链接：http://jsfiddle.net/e4af6bLs/2/

【讨论】：