AngularJS, переменные не меняются в представлении

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 вы должны определить модель директивы в нг-изменения:

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

И вот рабочий код: https://jsfiddle.net/tvbjscp9/5/

Answer 2

Я думаю, что вы не вызовите функцию JS FIDDLE

Вы можете иметь использование функции вызова на входе изменилось, либо использование наблюдателей на вызов функций

Answer 3

Я думаю, вы будете необходимо вызвать calculatecmbt для изменения значения и сохранить вывод в переменной области, которую вы привязываете в пользовательском интерфейсе.

<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/)!