const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
$scope.list = [tasks[1]];
$scope.radioGroup = {
simple: {
items: priorities,
value: priorities[0],
},
disabled: {
items: priorities,
value: priorities[1],
disabled: true,
},
changeLayout: {
items: priorities,
value: priorities[0],
layout: 'horizontal',
},
customItemTemplate: {
items: priorities,
value: priorities[2],
itemTemplate(itemData, _, itemElement) {
itemElement
.parent().addClass(itemData.toLowerCase())
.text(itemData);
},
},
eventRadioGroupOptions: {
items: priorityEntities,
valueExpr: 'id',
displayExpr: 'text',
value: priorityEntities[0].id,
onValueChanged(e) {
$scope.list = tasks.filter((item) => item.priority === e.value);
},
},
};
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div class="form">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Default mode</div>
<div class="dx-field-value">
<div dx-radio-group="radioGroup.simple"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Disabled</div>
<div class="dx-field-value">
<div dx-radio-group="radioGroup.disabled"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Horizontal layout</div>
<div class="dx-field-value">
<div dx-radio-group="radioGroup.changeLayout"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Custom item template</div>
<div class="dx-field-value">
<div dx-radio-group="radioGroup.customItemTemplate"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Event handling</div>
<div class="dx-field-value">
<div id="radio-group-with-selection" dx-radio-group="radioGroup.eventRadioGroupOptions"></div>
</div>
</div>
</div>
<div id="tasks-list">
Tasks by selected priority:
<ul id="list">
<li ng-repeat="task in list">{{task.subject}}</li>
</ul>
</div>
</div>
</div>
</body>
</html>
.low.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
background: gray;
}
.normal.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
background: green;
}
.urgent.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
background: orange;
}
.high.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
background: red;
}
#radio-group-with-selection {
margin-bottom: 10px;
}
#tasks-list {
margin: 0 0 10px 10px;
white-space: normal;
}
#list {
margin: 10px 0 0 20px;
padding-left: 0;
text-align: left;
}
const priorities = ['Low', 'Normal', 'Urgent', 'High'];
const priorityEntities = [
{ id: 0, text: 'Low' },
{ id: 1, text: 'Normal' },
{ id: 2, text: 'Urgent' },
{ id: 3, text: 'High' },
];
const tasks = [{
subject: 'Choose between PPO and HMO Health Plan',
priority: 3,
}, {
subject: 'Non-Compete Agreements',
priority: 0,
}, {
subject: 'Comment on Revenue Projections',
priority: 1,
}, {
subject: 'Sign Updated NDA',
priority: 2,
}, {
subject: 'Submit Questions Regarding New NDA',
priority: 3,
}, {
subject: 'Rollout of New Website and Marketing Brochures',
priority: 3,
}];
