Available in the OSS Version
Editors - AngularJS
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
| Control Name | HTML Element | Ignite UI for jQuery Controls |
|---|---|---|
| igCurrencyEditor | ||
| igDateEditor | ||
| igMaskEditor | ||
| igNumericEditor | ||
| igPercentEditor | ||
| igTextEditor | ||
| igDatePicker |
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how create a number of different editors using AngularJS directives.
Code View
Copy to Clipboard
<!DOCTYPE html> <html> <head> <title></title> <!-- Ignite UI for jQuery Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" /> <link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <script src="/js/angular.min.js"></script> <!-- Ignite UI for jQuery Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/igniteui-angularjs.js"></script> <style> .row { margin-right: 0; margin-left: 0; } </style> <script type="text/javascript"> var sampleApp = angular.module('sampleApp', ['igniteui-directives']); sampleApp.controller('editorsController', function ($scope) { $scope.editors = { currency: 12.1, date: new Date(), editor: 'Infragistics', mask: '134-134-134', numeric: 123, percent: 0.12, text: 'Ignite UI for jQuery' }; }); </script> </head> <body> <div ng-app="sampleApp" ng-controller="editorsController"> <table id="" class="table table-striped table-hover"> <thead> <tr> <th>Control Name</th> <th>HTML Element</th> <th>Ignite UI for jQuery Controls</th> </tr> </thead> <tbody> <tr> <td>igCurrencyEditor</td> <td><input class="form-control" type="number" ng-model="editors.currency" step="any" /></td> <td><ig-currency-editor class="form-control" ng-model="editors.currency"></ig-currency-editor></td> </tr> <tr> <td>igDateEditor</td> <td><input class="form-control" type="text" ng-model="editors.date" /></td> <td><ig-date-editor class="form-control" ng-model="editors.date"></ig-date-editor></td> </tr> <tr> <td>igMaskEditor</td> <td><input class="form-control" type="text" ng-model="editors.mask" /></td> <td><ig-mask-editor class="form-control" ng-model="editors.mask" input-mask="999-999-999"></ig-mask-editor></td> </tr> <tr> <td>igNumericEditor</td> <td><input class="form-control" type="number" ng-model="editors.currency" step="any" /></td> <td><ig-numeric-editor class="form-control" ng-model="editors.currency" button-type="spin"></ig-numeric-editor></td> </tr> <tr> <td>igPercentEditor</td> <td><input type="number" class="form-control" ng-model="editors.percent" step="any" /></td> <td><ig-percent-editor class="form-control" ng-model="editors.percent"></ig-percent-editor></td> </tr> <tr> <td>igTextEditor</td> <td><input class="form-control" type="text" id="editor11" ng-model="editors.text" /></td> <td><ig-text-editor class="form-control" id="editor1" ng-model="editors.text"></ig-text-editor></td> </tr> <tr> <td>igDatePicker</td> <td><input class="form-control" type="text" id="datePicker11" ng-model="editors.date" /></td> <td><ig-date-picker class="form-control" id="datePicker1" ng-model="editors.date"></ig-date-picker></td> </tr> </tbody> </table> </div> </body> </html>