jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
54 lines (49 loc) • 2.69 kB
HTML
<html ng-app="demoApp">
<head>
<title id="Description">Create a widget from Tag name with 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/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.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 data = new Array();
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
for (var i = 0; i < firstNames.length; i++) {
var row = {};
row["label"] = firstNames[i];
row["value"] = lastNames[i];
data[i] = row;
}
$scope.listBoxSettings = {
source: data, itemHeight: 50, height: 250, width: 220,
renderer: function (index, label, value) {
var datarecord = data[index];
var imgurl = '../../images/' + label.toLowerCase() + '.png';
var img = '<img height="30" width="25" src="' + imgurl + '"/>';
var table = '<table style="color: inherit; font-size: inherit; font-style: inherit;"><tr><td style="width: 35px;">' + img + '</td><td>' + label + " " + value + '</td></tr></table>';
return table;
}
};
$scope.selectedValue = data[0];
});
</script>
</head>
<body>
<div ng-controller="demoController">
<jqx-list-box ng-model="selectedValue" jqx-ng-model jqx-settings="listBoxSettings"></jqx-list-box>
<br />
<br />
Selected: {{selectedValue.label + " " + selectedValue.value}}
</div>
</body>
</html>