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

时间:2016-08-25 13:11:32

标签: javascript html angularjs input return

用户在HTML中插入值:

private void rentSaveButton_Click(object sender, RoutedEventArgs e)
{
    using (StreamWriter sw = new StreamWriter(@"D:\deviceLib.txt", true))
    {
        var currentUser = _list.Where(u => u.Id == int.Parse(userIDTextBox.Text)).FirstOrDefault();

        var currentDevice = _list2.Where(i => i.deviceId == int.Parse(deviceIDTextBox.Text)).FirstOrDefault();
        if (currentDevice != null &&  currentUser != null)
        {
            currentDevice.Availability = false;
            currentDevice.rentId = currentUser.Id;
            currentDevice.rentName = currentUser.Name;
            currentDevice.rentSurname = currentUser.Surname;
            dataGridDeviceList.Items.Refresh();

            //  Call write method
            WriteDeviceStateToStream(sw, currentDevice);

            //  The user's going to get real tired of this messagebox real fast. 
            MessageBox.Show("Rent done. Thanks!");
            tabControl.SelectedItem = mainTab;
        }
        else
        {
            MessageBox.Show("We don't have such device. Sorry :( ");
            userIDTextBox.Clear();
            deviceIDTextBox.Clear();
        }
    }
}

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

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

但不知何故,我在视图中看不到结果。什么可能是错的?

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

我会做这样的事情

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>

答案 2 :(得分:1)

解决方案:

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/