Question

我创建了这个简单的计算，用户插入他的等级，然后我们得到战斗计算。但问题是，视图永远不会改变，因为变量在某种程度上是静态的。请找jsfiddle代码。

Code link : jsfiddle

Answer 1

您的代码存在一些问题。

首先使用每个输入元素的模型不会告诉您希望捕获更改事件的角度，换句话说，您希望在更改这些元素值时通知角度。这就是您需要使用ng-change指令的原因，该指令的作用是将新值绑定到DOM元素。

第二个问题是，角度不知道模型值何时被更改，直到您没有告诉watch它们。

考虑到上述考虑因素，这是重构代码的样子：

var app= angular.module("cmbtCalc", []);

app.controller('CombatCalculatorController', function($scope){
    $scope.result = 0;
    $scope.ALvl = 1 ;
    $scope.SLvl = 1 ;
    $scope.MLvl = 1 ;
    $scope.RLvl = 1 ;
    $scope.HLvl = 10 ;
    $scope.DLvl = 1 ;
    $scope.PLvl = 1 ;

    function RangeMage (real){
        return 0.325 * (Math.floor( real/ 2)+real); 
    };

    $scope.RealRange=RangeMage($scope.RLvl);
    $scope.RealMage=RangeMage($scope.MLvl);

    ['SLvl', 'ALvl', 'MLvl', 'RLvl', 'HLvl', 'DLvl', 'PLvl'].forEach(function(val) {
        $scope.$watch(val, function(newValue, oldValue) {
            $scope.melee = 0.325 * ($scope.ALvl + $scope.SLvl);
            $scope.base = 0.25 * ( $scope.DLvl + $scope.HLvl + Math.floor ($scope.PLvl / 2 ));
        })
    });

    $scope.calculatecmbt = function (){   
        $scope.result = Math.max($scope.melee, $scope.RealRange, $scope.RealMage) + $scope.base;  
        return $scope.result;   

    };
});

在你的html中，你必须为ng-change指令定义一个模型：

<h2 ng-model="RealRang" ng-change="calculatecmbt">
{{result}}
{{calculatecmbt() | number}}
</h2>

以下是工作代码：https://jsfiddle.net/tvbjscp9/5/

Answer 2

我认为你没有调用函数JS FIDDLE

您可以在输入更改时使用函数调用，或者使用观察者调用函数

$scope.$watch('myVar', function(newValue, oldValue) {// You can invoke your custom functions here
});

Answer 3

我想您需要在更改值时调用calculatecmbt并将输出保存在您在UI上绑定的范围变量中。

    <p>Insert your Prayer Level  <input type="number" ng-model="PLvl" ng-change="calculatecmbt()"></p>
    {{outputVal}}

控制器代码

$scope.outputVal = Math.max($scope.melee, $scope.RealRange, $scope.RealMage) + $scope.base;        
  return $scope.outputVal;        
};

Answer 4

我使它工作，没有传递函数值。这是工作代码：）asdasdasdas

[Working jsfiddle]( https://jsfiddle.net/tvbjscp9/8/)!

AngularJS，变量在视图中没有变化

4 个答案: