My model is populated at the controller, and when I bind the data acts like it is there, but the input box is blank. As soon as I enter a value everything works normally. But if the default value is blank this will confuse my users greatly.
<div class="row" ng-controller="RangeInputCtrl">
<div class="col-md-12">
<label class="leftwall">
Value:
<input type="number" class="form-control"
ng-model="percentOfMax.current"
min="{{percentOfMax.min}}"
max="{{percentOfMax.max}}"
ng-change="changeValue()" />
</label>
</div>
</div>
ng-value is useless with this directive, since angular hijacks the input element. The code was working even worst without the min and max, so I know that they are required (or at least act required).
I have the input directive wrapped in a label due to twitter-bootstrap 3.
(function () {
'use strict';
var controllerId = 'RangeInputCtrl';
angular.module('app').controller(controllerId,['$scope', buildRangeInput]);
function buildRangeInput($scope) {
$scope.percentOfMax = InitCalcPercentOfMax($scope);
$scope.changeValue = function () {
var percentOfMax = $scope.percentOfMax;
$scope.percentOfMax = calcPercentOfMax(percentOfMax);
}
}
})();
There is a function, not posted here that takes $scope and builds the initial data structure from a complex object. Not shown here. InitCalcPercentOfMax has been tested and works as planned. It is external, and called separately due to code reuse.
The other function calcPercentOfMax(percentOfMax) is used to recalculate the formulas used in some directives that have been pulled (for the purpose of troubleshooting).
In short somewhere I must have something acting or posting wrong, and I just don't see it.
I had console.log([some expression]) all over, to see if the data was incorrect or ever blank, but the percentOfMax.current value always has at least a 0, so I still don't see where I am getting a blank from.
No error in console. And if I put in a <span>{{percentOfMax.current}}</span>
I get the correct value on the first load.
The value is there in the model, it is just blank in the input box.
I think this is all of details, if I missed something, I will try to reply with an edit ASAP.
Based on a discussion at the angular chat room, I made the following changes.
var d = $q.defer();
var p = d.promise;
//If I leave this off, it never resolves. So there is nothing in the directive to trigger resolve.
d.resolve(function () {
return InitCalcPercentOfMax($scope);
}())
$scope.percentOfMax = p.then(function (POM) {
$scope.percentOfMax = POM;
});
I also added <span>{{percentOfMax}}</span>
back to my view. I can see the promise firing, and I can see that the expected data is in my precentOfMax, but the input box is still empty.
Before someone asks, I am using version Angular.js 1.2.14, downloaded from Nuget
It looks like it should work, my guess is that you either have an error on the console that you've missed, or that there's some other logical error. This JSBin example is a simplified version which works: http://jsbin.com/zumedezu/1/edit
Try changing Value:
to Value: {{percentOfMax.current}}
to output the current value.
Is it possible that InitCalcPercentOfMax
performs the calculation async outside of Angular?
InitCalcPercentOfMax($scope) was returning .current
as a string. CalcPercentOfMax wasn't correcting it, but knew how to work with a string as a number.
Since the input type is number, the new numeric value was causing the .current
to change to a number, so its value was showing up.
It took a greek lunch to see that the initial value was quoted.