Breezejs Double trouble in angularjs

Question

I am trying to change a value in a angular view from a integer to a float/double value that is bind to ngmodel. The input don’t except anything other than a integer.

Answer 1

This doesn't work for large or small numbers that might be entered using an exponent form. If I want to enter 2.55e35 (a large salary ;)) the current implementation stops at the 'e'. Is there an easy way to fix this?

Answer 2

I tracked down the behaviour in the breeze code, when the value change it is intercepted and parsed:

var coerceToFloat = function (source, sourceTypeName) {
   if (sourceTypeName === "string") {
        var src = source.trim();
        if (src === "") return null;
         var val = parseFloat(src);
        return isNaN(val) ? source : val;
    }
    return source;
};

So when the value change this function is called that parse the string to a float, the problem is as soon as the value entered is some number and a point like 5. it parse it to the number 5 witch is obviously correct. So you will never be able to get past the point.

When changing the input to a number type it works because its sourceTypeName is not a string.

Update

I ended up changing the breeze code to enable the decimal to be entered, I’m still not sure if I missed something but this works for me.

var coerceToFloat = function (source, sourceTypeName) {
    if (sourceTypeName === "string") {
        var src = source.trim();
        if (src === "") return null;
        var val;
        if (src.indexOf('.', src.length - 1) !== -1) {
            val = src;
        }
        else {
            val = parseFloat(src);
        }
        return isNaN(val) ? source : val;
    }
    return source;
};

Answer 3

Update 12 March

I found what I believe is a better solution for your use case because it does not involve "debouncing" nor any change to Breeze. See the zEquivalent directive in this new plunker

Reminder: the "best" resolution of the problem you discovered is still up in the air within the Breeze core team. You should not lock into a particular outcome until we can make a more definitive recommendation.

p.s.: I should have mentioned that Jay and I are on the Breeze core team. We are doing our best to get you out of a jam but sometimes we move a wee too quickly. Bear with us please.

This answer deprecated as of 12 March

Leaving it here for "historical" purposes.

I think you should try the zEquivalent directive first.

It is important to know that the Angular team is working on a robust extension to data binding that includes "debounce" which is still a good idea for many scenarios. See this (long) pull request thread on the Angular GitHub site.

Original Answer

Consider the zDebounce directive currently located in this plunker which is based on @qorsmond's second attempt.

I'd like to know your thoughts. I'm inclined to call this "the solution" and to add it to Breeze Labs. I'll update this answer when/if I do add it to the labs.

Answer 4

I've checked a preliminary fix into GitHub for this. Please check it out and let me know if it works ( or not). We are still testing it.

This issue is caused by Angular's (new) behavior where if the angular digest cycle does not see a change to a model property then it seems to reset the UI to what it was on the previous digest cycle. So.. the idea behind this fix is to convince angular that the model value has changed even when it hasn’t.

and.. nice catch ( this was not obvious and your plunkr helped) :)

Ward adds: You must love the breeze team responsiveness :-) Jay jumped right on this and came up with an interesting solution. But please note the word "preliminary" in Jay's answer. We are discussing this "fix" internally and it may be withdrawn. Consider the zEquivalent directive in this new plunker or just wait until the dust settles.

Answer 5

you can use input type="number" step="any" and hide the arrows using css