How to bind and set an input with EJ Numeric

[Rushikesh Joshi]

Hi Syncfusion Folks,

How can I configure input text for Numeric field in Syncfusion with RequireJS and AngularAMD?

I have a below code, 

<input type="text" class="form-control" id="txtNumber" ej-numerictextbox ng-model="Number" e-value="Number" e-decimalplaces="2" e-showspinbutton="false" e-incrementstep="0" maxlength="15" />

And from Controller I have below code.

        $scope.Number = 15000;

        $("#txtNumber").ejNumericTextbox();

When page is getting load it is not binding initial values neither from e-value nor from ng-model, also I need to specifically mentioned from code behind with ejNumericTextbox() to make that control numeric.

Can you please provide us a way to make this working like normal Angular works, Note, if I assigned like below it is working but I am looking if I can do something with e-value, e-decimalplaces etc... directives?

$("#txtNumber").ejNumericTextbox({

            name: "numeric",

            value: 5,

            width: "100%"

});

My questions is also for Calendar, Rating etc... controls.

Thanks

Rushi

[Selvamani Sankarappan]

Hi Rushikesh,

Thanks for Contacting Syncfusion Support,

We have analyzed your query and we have prepared the sample based on your requirement (by using RequireJS with AngularJS). Please get the sample from the following location

http://jsplayground.syncfusion.com/1hlmsj45

Please refer the following code example:

[html]

<input id="numeric" type="text" ej-numerictextbox e-value="nvalue"/>

[script]

requirejs.config({

            paths: {

                "jquery": "http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min",

                "jquery-easing": "http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min",

                "angular": "http://cdn.syncfusion.com/js/assets/external/angular.min",

                "scripts": 'http://cdn.syncfusion.com/js/assets/external',

                "ejscripts": 'http://cdn.syncfusion.com/13.4.0.63/js'

            },

            shim: {

                "jquery-easing": ["jquery"],

            }

        });

        require(["ejscripts/common/ej.widget.angular.min", "ejscripts/web/ej.editor.min"], function () {

            window.module = angular.module('EditCtrl', ['ejangular']);

            window.module.controller('EditorsCtrl', function ($scope) {

                $scope.nvalue = 600;

            });

            angular.bootstrap(document, ['EditCtrl']);

        });

Please let us know if you need any further assistance,

Regards,

Selvamani S

[Rushikesh Joshi]

Thanks Selvamani,

I will verify this and will update on this thread, out of this, is there any documentation which I can refer for RequireJS implementation. This will really helps me for future implementation.

Thanks

Rushi

[Selvamani Sankarappan]

Hi Rushikesh,

Thanks for the update,

We have provided the documentation for how to config the RequireJS with our ej components. Please get the more information about the RequireJS from the following link

http://help.syncfusion.com/js/requirejs

Refer to the following link to get the dependency script files for TextBox component. Similarly, documentation for other controls dependency script file is present within the corresponding component names.

http://help.syncfusion.com/js/api/ejtextboxes

To know more about the AngularJS, Please refer the following link:

http://help.syncfusion.com/js/angularjs

Please refer the following link to know about the AngularJS implementation with our ej components

http://js.syncfusion.com/demos/web/#!/azure/angularsupport/textboxes

Please let us know if you need any further assistance,

Regards,

Selvamani S