This is a migrated thread and some comments may be shown as answers.

Using k-min and k-max with Angular

8 Answers 562 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 07 Oct 2014, 11:26 AM
Hi,

I'm setting the min and max values with Angular, they set fine first time but don't update if 'items' values' change (as if there's a one-time bind rather than a two-way bind).

This means that if I set one item to 5, and then the next item along should have its min/max values changed accordingly.

Is there a way to do this out-the-box with Kendo UI? It works as expected with a standard HTML number input.

Here's what I have currently:

    <div ng-repeat="item in items">
        <input data-kendo-numeric-text-box
            data-k-min="items[$index + 1].value"
            data-k-max="items[$index - 1].value"
            data-k-format="'n0'"
            data-k-ng-model="item.value" />
    </div>

Thanks!

8 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 09 Oct 2014, 07:08 AM
Hi Tim,

I believe that the widget does not allow item.value, because it is out of the defined <k-min, k-max> range. Defining a more conditional setting of the min/max range solves the problem. Here is a Dojo demo that I've prepared for better understanding.

As a side note, I would suggest you check the "Notes for ng-repeat" help topic, as there are several important points you need to be aware of.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tim
Top achievements
Rank 1
answered on 11 Dec 2014, 09:51 AM
Hi Georgi,

Thanks for your reply and apologies it's taken so long to get back to you.

That's close to what I'm getting at but in your demo the min and max values don't change when the values change. E.g. if I change the last input value to 9, the penultimate input's 'max' value is still 5.

This happens even if I make the array an Observable Array with `new kendo.data.ObservableArray($scope.items)`. Do I need to attach a change listener to each one and update the min and max values that way?

Thanks,
Tim
0
Georgi Krustev
Telerik team
answered on 13 Dec 2014, 10:14 AM
Hello Tim,

In general, k-min/k-max attributes will just set the min/max options of the widgets. They will not update the values dynamically like for instance k-ng-model, because they are just a short-hand for declarative widget declaration (they are not directives). If you would like to update the min/max values dynamically then you will need either wire the change event and update the corresponding options manually or write a custom directive that will basically do the same thing.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ken
Top achievements
Rank 1
answered on 30 Dec 2014, 10:01 PM
Is there any chance you have sample code of an Angular Directive that would do this?  I am running into the same problem and my Angular Skills are just not as good as I want them to be now.  A little sample code would be very helpful.
0
Ken
Top achievements
Rank 1
answered on 31 Dec 2014, 02:29 PM
I found a solution...  I set the k-max value using the k-options and using a $scope var in the controller.  I then added k-rebind on the same thing that k-options was.

That way, when I change the max value in the Options, it updates.

0
Craig
Top achievements
Rank 1
answered on 20 Nov 2015, 11:49 PM
So, I've been through this demo, and I don't see that it rebinds the min/max as the values in the other boxes change.  The min/max are staying constant, even though the values in the other boxes are changing.  I'm hitting this issue as well.  I can't dynamically change the max value in my instance.  I'm setting a scope var, but it just doesn't affect the control itself.
0
Craig
Top achievements
Rank 1
answered on 20 Nov 2015, 11:54 PM
Ken's k-options solution worked great.
0
Sergey
Top achievements
Rank 1
answered on 12 Sep 2017, 05:23 PM

simple working example withoout k-options:

<input kendo-numeric-text-box
                         k-rebind="_value"
                       k-min="_value" k-max="100" k-ng-model="value"/>

Tags
NumericTextBox
Asked by
Tim
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Tim
Top achievements
Rank 1
Ken
Top achievements
Rank 1
Craig
Top achievements
Rank 1
Sergey
Top achievements
Rank 1
Share this question
or