Я пытаюсь изучить угловое и иметь самое простое приложение, просто калькулятор, который отправляет 2 значения в API задней панели для добавления.Значения ng-модели всегда не определены
У меня есть директивы ng-model в 2 текстовых полях со значением по умолчанию 'Enter Value', и первоначально это значение присутствует в поле формы.
Однако, когда я пытаюсь получить значения, которые я вводил в поля формы, они всегда не определены, с одной переменной или с переменными в объекте.
Я действительно не понимаю, почему это происходит, и какие переменные не нг-модели, связанные с полем не определено:
var calculatorApp = angular.module('calculatorApp', [
'config',
'ngRoute',
'calculatorControllers',
'calculatorServices'
]);
calculatorApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/calculator', {
templateUrl: 'partials/calculator.html',
controller: 'CalculatorCtrl'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
}).
otherwise({
redirectTo: '/calculator'
});
}]);
calculatorControllers.controller('CalculatorCtrl', ['$scope', 'CalculatorService',
function($scope, CalculatorService) {
$scope.orderProp = 'asc';
$scope.result = ' awaiting calculation';
$scope.sum = {
val1: 'Enter Value',
val2: 'Enter Value'
}
$scope.add = function(val1, val2) {
alert($scope.sum.val1); //always undefined even if form field shows value and so are val1 and val2 passed to this function from html page
var promise = CalculatorService.add(val1, val2);
promise.then(function successCallback(response) {
$scope.sum = response.data.result;
}, function errorCallback(response) {
console.log('Error: ', response);
});
};
}]);
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<label>
Value One: <input type="text" name="lastName" ng-model="sum.val1" ng-minlength="3" ng-maxlength="5" />
</label>
<label>
Value Two: <input type="text" name="lastName" ng-model="sum.val2" ng-minlength="3" ng-maxlength="5" />
</label>
<button ng-click="add(sum.val1, sum.val2)">Add</button>
<div name="result" id="result">The result is <span ng-bind="result"></span></div>
</div>
Можете ли вы сделать jsfiddle? –