jQWidgets Directives for AngularJS
AngularJS is a JavaScript framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.
The integration between AngularJS and jQWidgets is implemented through a plug-in which we called jqxAngular. This plug-in includes AngularJS directives for
all widgets.
Getting Started
Add references to jQuery, AngularJS and jQWidgets files.
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="angular.js"></script><script type="text/javascript" src="jqxcore.js"></script><script type="text/javascript" src="jqxangular.js"></script>
In the AngularJS app definition, pass the jqwidgets module dependency:
var app = angular.module("app", ["jqwidgets"]);
Component Markup
To create a widget, you can simply make an HTML element matching the widget name, and add a "-" after "jqx". So if you want to use jqxButton, you would create a <jqx-button> element. Here is how the button would look like:
<jqx-button></jqx-button>
Example:
<!DOCTYPE><html ng-app="demoApp"><head> <title>Button directive from attribute for AngularJS</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { }); </script></head><body> <div ng-controller="demoController"> <jqx-button></jqx-button> </div></body></html>
You can also create a widget by using an attribute or class.
<button jqx-button>Button</button>
or data-prefixed
<button data-jqx-button>Button</button>
Example:
<!DOCTYPE><html ng-app="demoApp"><head> <title>Button directive from attribute for AngularJS</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { }); </script></head><body> <div ng-controller="demoController"> <button jqx-button>Button</button> </div></body></html>
These definitions are the equivalent of:
<button id="button"></button><script type="text/javascript"> $("#button").jqxButton();</script>
Widget configuration
You can set up a widget using
jqx- attributes. Note: Strings should be quoted with single quotes according to the AngularJS standards.
If the property is camel-cased, add a "-" right before the capitalized letter. So if we wanted to apply alternating rows to jqxGrid, we would do the follow:
<jqx-grid jqx-columns="columns" jqx-source="people" jqx-width="700" jqx-alt-rows="true"></jqx-grid>
The "jqx-source" attribute is a special attribute which can be used for setting the widget's data source to an object or property defined in the Controller.
The "jqx-settings" attribute can be used for setting the widget properties through an object defined in the Controller.
<script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { // Grid data. $scope.people = [{ id: 1, name: "Pedro", age: 13 }, { id: 2, name: "Clara", age: 22 }, { id: 3, name: "John", age: 33 }, { id: 4, name: "Pier", age: 27 }]; $scope.settings = { altrows: true, width: 500, height: 300, source: $scope.people, columns: [ { text: 'Id', dataField: 'id', width: 150 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Age', dataField: 'age', width: 150 } ] } }); </script></head><body> <div ng-controller="demoController"> <jqx-grid jqx-settings="settings"></jqx-grid> </div></body></html>
The "jqx-watch" attribute can be used for performing an object equality watch. When there is a change in the watched property's value or any of its inner properties, the widget will perform an automatic update.
<!DOCTYPE html><html ng-app="demoApp"><head> <title id="Description">jqxChart directive for AngularJS</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { var dataAdapter = new $.jqx.dataAdapter( { datatype: "csv", datafields: [ { name: 'Country' }, { name: 'GDP' }, { name: 'DebtPercent' }, { name: 'Debt' } ], url: '../sampledata/gdp_dept_2010.txt' }, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings $scope.chartSettings = { title: "Economic comparison", description: "GDP and Debt in 2010", showLegend: true, enableAnimations: true, padding: { left: 5, top: 5, right: 50, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'Country', showGridLines: true }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', columnsGapPercent: 50, valueAxis: { unitInterval: 5000, displayValueAxis: true, description: 'GDP & Debt per Capita($)' }, series: [ { dataField: 'GDP', displayText: 'GDP per Capita' }, { dataField: 'Debt', displayText: 'Debt per Capita' } ] }, { type: 'line', valueAxis: { unitInterval: 10, displayValueAxis: false, description: 'Debt (% of GDP)' }, series: [ { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' } ] } ] }; $scope.setLineChartType = function () { $scope.chartSettings.seriesGroups[0].type = 'line'; } }); </script></head><body> <div ng-controller="demoController"> <jqx-chart jqx-settings="chartSettings" jqx-watch="chartSettings.seriesGroups" style="width: 850px; height: 500px;"></jqx-chart> <br /> <jqx-button jqx-on-click="setLineChartType()">Set Line Chart Type</jqx-button> </div></body></html>
The "jqx-create" attribute can be used for creating the widget on demand or with some delay. For example, you may want the widget to be created after some other action like when an Ajax call is completed or when the widget's settings object is available.
<!DOCTYPE><html ng-app="demoApp"><head> <title>Binding to JSON</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope, $http) { $scope.createWidget = false; $http({ method: 'get', url: '../sampledata/beverages.txt' }).success(function (data, status) { // prepare the data var source = { datatype: "json", datafields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', localdata: data }; var dataAdapter = new $.jqx.dataAdapter(source); $scope.gridSettings = { width: 850, source: dataAdapter, columnsresize: true, columns: [ { text: 'Name', datafield: 'name', width: 250 }, { text: 'Beverage Type', datafield: 'type', width: 250 }, { text: 'Calories', datafield: 'calories', width: 180 }, { text: 'Total Fat', datafield: 'totalfat', width: 120 }, { text: 'Protein', datafield: 'protein', minwidth: 120 } ] }; $scope.createWidget = true; }).error(function (data, status) { // Some error occurred }); }); </script></head><body> <div ng-controller="demoController"> <jqx-grid jqx-create="createWidget" jqx-settings="gridSettings"></jqx-grid> </div></body></html>
Invoking Methods
The "jqx-instance" attribute can be used for setting the widget instance in the Controller. You will have to initialize an empty object in the Controller and then set the "jqx-instance" attribute to point to it. The instance will allow you to easily invoke widget methods.
<!DOCTYPE><html ng-app="demoApp"><head> <title>Grid directive for AngularJS</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { // Grid data. $scope.people = [{ id: 1, name: "Pedro", age: 13 }, { id: 2, name: "Clara", age: 22 }, { id: 3, name: "John", age: 33 }, { id: 4, name: "Pier", age: 27 }]; $scope.grid = {}; $scope.settings = { altrows: true, width: 500, height: 300, ready: function() { $scope.grid.selectrow(1); }, source: $scope.people, columns: [ { text: 'Id', dataField: 'id', width: 150 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Age', dataField: 'age', width: 150 } ] } }); </script></head><body> <div ng-controller="demoController"> <jqx-grid jqx-instance="grid" jqx-settings="settings"></jqx-grid> </div></body></html>
By using the "jqx-instance" attribute, you can invoke a method using the syntax in the above example. To call a method, you can also use the object bound to the "jqx-settings" attribute. The widget's directive automatically extends that object by adding a function called
apply to that object and you can use it to invoke a method of the widget. You can also use the widget's name instead of
apply.
$scope.settings ={ altrows: true, width: 500, height: 300, ready: function() { $scope.settings.apply('selectrow', 1); }, source: $scope.people, columns: [ { text: 'Id', dataField: 'id', width: 150 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Age', dataField: 'age', width: 150 } ]}
or
$scope.settings ={ altrows: true, width: 500, height: 300, ready: function() { $scope.settings.jqxGrid('selectrow', 1); }, source: $scope.people, columns: [ { text: 'Id', dataField: 'id', width: 150 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Age', dataField: 'age', width: 150 } ]}
Binding to Events
You can define events in the HTML markup, or in the settings object bound to the "jqx-settings" attribute.
To define events in the markup, you can use the "jqx-on" prefix.
Example with callback function and the "jqx-on" prefix:
<!DOCTYPE><html ng-app="demoApp"><head> <title>Grid directive for AngularJS</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { // Grid data. $scope.people = [{ id: 1, name: "Pedro", age: 13 }, { id: 2, name: "Clara", age: 22 }, { id: 3, name: "John", age: 33 }, { id: 4, name: "Pier", age: 27 }]; $scope.grid = {}; $scope.settings = { altrows: true, width: 500, height: 300, ready: function() { $scope.grid.selectrow(1); }, source: $scope.people, columns: [ { text: 'Id', dataField: 'id', width: 150 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Age', dataField: 'age', width: 150 } ] } $scope.bindingComplete = function (event) { alert("binding is completed"); } }); </script></head><body> <div ng-controller="demoController"> <jqx-grid jqx-on-bindingcomplete="bindingComplete()" jqx-instance="grid" jqx-settings="settings"></jqx-grid> </div></body></html>
Example with AngularJS $on and the "jqx-on" prefix:
<!DOCTYPE><html ng-app="demoApp"><head> <title>Grid directive for AngularJS</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { // Grid data. $scope.people = [{ id: 1, name: "Pedro", age: 13 }, { id: 2, name: "Clara", age: 22 }, { id: 3, name: "John", age: 33 }, { id: 4, name: "Pier", age: 27 }]; $scope.grid = {}; $scope.settings = { altrows: true, width: 500, height: 300, ready: function() { $scope.grid.selectrow(1); }, source: $scope.people, columns: [ { text: 'Id', dataField: 'id', width: 150 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Age', dataField: 'age', width: 150 } ] } $scope.$on('bindingComplete', function (event) { alert("binding is completed"); }); }); </script></head><body> <div ng-controller="demoController"> <jqx-grid jqx-on-bindingcomplete="bindingComplete" jqx-instance="grid" jqx-settings="settings"></jqx-grid> </div></body></html>
Example with a callback function defined in the settings object:
<!DOCTYPE><html ng-app="demoApp"><head> <title>Grid directive for AngularJS</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { // Grid data. $scope.people = [{ id: 1, name: "Pedro", age: 13 }, { id: 2, name: "Clara", age: 22 }, { id: 3, name: "John", age: 33 }, { id: 4, name: "Pier", age: 27 }]; $scope.grid = {}; $scope.settings = { altrows: true, width: 500, height: 300, ready: function() { $scope.grid.selectrow(1); }, source: $scope.people, columns: [ { text: 'Id', dataField: 'id', width: 150 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Age', dataField: 'age', width: 150 } ], bindingcomplete: function (event) { alert("binding is completed"); } } }); </script></head><body> <div ng-controller="demoController"> <jqx-grid jqx-instance="grid" jqx-settings="settings"></jqx-grid> </div></body></html>
When a widget is created, the plug-in raises an event with the following name: 'widget name' + 'Created', i.e for jqxDropDownList, the event name is 'jqxDropDownListCreated'.
The event arguments are:
- element - the widget's HTML Element
- id - the widget's id
- name - the widget's name
Example:
<!DOCTYPE><html ng-app="demoApp"><head> <title>Event Handling using jqxAngular plug-in</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { $scope.people = [{ id: 1, name: "Nancy", age: 52 }, { id: 2, name: "Andrew", age: 31 }, { id: 3, name: "Robert", age: 40 }, { id: 4, name: "Peter", age: 28 }]; // init DropDownList's settings object. $scope.dropDownListSettings = { width: 200, height: 30, autoDropDownHeight: true, displayMember: "name", valueMember: "id", source: $scope.people } $scope.$on('jqxDropDownListCreated', function (event, arguments) { }); }); </script></head><body> <div ng-controller="demoController"> <jqx-drop-down-list jqx-settings="dropDownListSettings"></jqx-drop-down-list> </div></body></html>
Using ngModel
The inputs and lists like jqxInput, jqxPasswordInput, jqxNumberInput, jqxDateTimeInput, jqxChecBox, jqxRadioButton, jqxListBox, jqxDropDownList, jqxComboBox, jqxSlider, jqxRating, jqxCalendar support the ngModel directive which binds the widget's value to a property on the scope. When you use the ngModel, you will get the widget's value as a string, unless you add the jqx-ng-model attribute. For example, a ListBox with Items and each item is an object. By using ngModel, you will get the item's value. By adding jqxNgModel, you will get the item's object. A similar case is the jqxDateTimeInput, by default you can bind it to a text, but if you add jqxNgModel, you can get the widget's value which is a JavaScript Date object or if you use the widget in range selection mode, it will be an object with "from" and "to" members where from and to are JavaScript Date objects.
The jqxRadiobutton directive supports the "value" argument which is the value to which the expression should be set when selected.
The jqxCheckBox directive supports the "ngTrueValue" and "ngFalseValue" arguments which represent the value to which the expression should be set when selected and not selected.
<!DOCTYPE><html ng-app="demoApp"><head> <title>Using ngModel with jQWidgets</title> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { $scope.user = { name: "Brian", working: true, birthDate: new Date(1980, 3, 2), friends: [ "Peter", "Nancy", "Michael", "John", "Robert" ], bestFriend: "Peter", married: true, color: "Blue", car: true, children: 'YES' }; }); </script></head><body> <div ng-controller="demoController"> <form name="userForm"> <jqx-input jqx-width="200" jqx-height="25" name="userName" ng-model="user.name"></jqx-input> <br /> <br /> <jqx-date-time-input jqx-width="200" jqx-height="25" ng-model="user.birthDate"></jqx-date-time-input> <br /> <jqx-drop-down-list jqx-auto-drop-down-height="true" jqx-width="200" jqx-height="25" jqx-source="user.friends" ng-model="user.bestFriend"></jqx-drop-down-list> <br /> <jqx-check-box ng-model="user.working">Working</jqx-check-box> <br /> <jqx-radio-button jqx-group-name="'married'" value="true" ng-model="user.married">Married</jqx-radio-button> <br /> <jqx-radio-button jqx-group-name="'married'" value="false" ng-model="user.married">Not Married</jqx-radio-button> <br /> Favorite Color: <br /><br /> <jqx-radio-button jqx-group-name="'colors'" value="'Green'" ng-model="user.color">Green</jqx-radio-button> <br /> <jqx-radio-button jqx-group-name="'colors'" value="'Blue'" ng-model="user.color">Blue</jqx-radio-button> <br /> <jqx-check-box ng-model="user.car">Car</jqx-check-box> <br /> <jqx-check-box ng-true-value="'YES'" ng-false-value="'NO'" ng-model="user.children">Children</jqx-check-box> </form> <pre>user.name = <span ng-bind="user.name"></span></pre> <pre>user.working = <span ng-bind="user.working"></span></pre> <pre>user.birthDate = <span ng-bind="user.birthDate"></span></pre> <pre>user.bestFriend = <span ng-bind="user.bestFriend"></span></pre> <pre>user.married = <span ng-bind="user.married"></span></pre> <pre>user.color = <span ng-bind="user.color"></span></pre> <pre>user.car = <span ng-bind="user.car"></span></pre> <pre>user.children = <span ng-bind="user.children"></span></pre> </div></body></html>