I have been looking for an example for 'multicheckbox' type in 'angular formly form', where the check-boxes are selected or unselected based on corresponding value in form model, when the form is loaded,but could not find any.Can some one please help me with an example?
I shall explain my exact case :
Following is my formly form.Its a multicheckbox with key as 'selectedAnswer'.Initial value for 'selectedAnswer' in the forms model is "ee,dd".But the correspondig values are not getting checked in the check box on loading the form.
[
{
"key":"selectedAnswer",
"type":"multiCheckbox",
"templateOptions":{
"label":"fsdfsdf",
"options":[
{
"name":"ee",
"value":"ee"
},
{
"name":"dd",
"value":"dd"
},
{
"name":"tg",
"value":"tg"
}
]
}
}
]
Please help me to fix this issue.
Thanks,
Deepthy.
click this DEMO for example
HTLM/VIEW
<form novalidate>
<formly-form model="vm.model" fields="vm.Fields" form="vm.rentalForm">
</formly-form>
</form>
Script Code
var vm = this;
vm.model = {
check1: true,
check2:false,
check3:false
};
vm.Fields = [
{
key: 'check1',
type: 'checkbox',
templateOptions: { label: '' },
expressionProperties: {
'templateOptions.label': function(viewValue, modelValue, scope) {
return "check1"
}
}
},{
key: 'check2',
type: 'checkbox',
templateOptions: { label: '' },
expressionProperties: {
'templateOptions.label': function(viewValue, modelValue, scope) {
return "check2"
}
}
},{
key: 'check3',
type: 'checkbox',
templateOptions: { label: '' },
expressionProperties: {
'templateOptions.label': function(viewValue, modelValue, scope) {
return "check3"
}
}
}
];
Hope this works for you.
You can use this type of check box list -
Updated Answer
HTML/View
<form novalidate>
<formly-form model="vm.model" fields="vm.Fields" form="vm.rentalForm">
</formly-form>
</form>
Controller
function MainController(province) {
var vm = this;
vm.model = {
selectedAnswer: ["dd","ee"],
};
vm.Fields =[
{
"key":"selectedAnswer",
"type":"multiCheckbox",
"templateOptions":{
"label":"fsdfsdf",
"options":[
{
"name":"ee",
"value":"ee"
},
{
"name":"dd",
"value":"dd"
},
{
"name":"tg",
"value":"tg"
}
]
}
}
] }
For better understanding check this Fiddle
I have forked the plunk of Santhosh kesavan's answer for providing the better answer.
Hope it will work for you.
For nested keys like below:
{
key: 'domains',
templateOptions: { label: 'Domains' },
fieldGroup: [
{
key: 'domainsCheckbox',
type: 'multicheckbox',
templateOptions: {
options: [
{
key: 'Option1',
value: 'Option1'
},
{
key: 'Option2',
value: 'Option2'
},
]
},
}
]
}
You can specify the model as:
model = {'domains': {'domainsCheckbox': { 'Option1': true }}};
I didn't work for me, in latest version the type has been updated. like type: multiCheckbox --> multicheckbox and options.name --> options.key
[
{
"key":"selectedAnswer",
"type":"multicheckbox",
"templateOptions":{
"label":"fsdfsdf",
"options":[
{
"key":"ee",
"value":"ee"
},
{
"key":"dd",
"value":"dd"
},
{
"key":"tg",
"value":"tg"
}
]
}
}
]
Below code will give you the idea
index.html
<!doctype html>
<html lang="en" ng-app="checkBx">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-selected-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<label>Check me to select: <input type="checkbox" ng-model="isSelected"></label><br/>
<label>Check me to select: <input type="checkbox" ng-model="isSecSelected"></label><br/>
</body>
</html>
script.js
var app = angular.module('checkBx', [])
app.controller('myCtrl', ['$scope', myCtrl]);
function myCtrl($scope){
$scope.isSelected = true;
$scope.isSecSelected = false;
}
Related
I am working on list of languages and levels of proficiency. This would be a array of objects:
languages : [
{ name : 'English', level : 'native' },
{ name : 'Spanish', level : 'good' }
]
So I have such definitions of fields:
{
className : 'col-xs-4',
type : 'ui-select',
key : 'languages[' + index + '].name',
templateOptions : {
label : 'Some label',
options : [ ... data there ... ],
required : true
}
},
{
className : 'col-xs-8 btn-radio-language',
type : 'btn-radio',
key : 'languages[' + index + '].level',
templateOptions : {
label : 'Proficiency',
options : ... data for native, good, so so ...
}
}
Those definition would repeat several times with respect of index.
However instead of array languages being addressed with values series of properties in model like:
"languages[0].level": "native",
"languages[1].level": "advanced",
"languages[0].name": "German"
have been created...
How I can point to languages array in model ?
If I've understood it correctly you could map your data with languages.map(function(language) {...}).
Please have a look at the demo below or at this jsfiddle.
angular.module('demoApp', ['formly', 'formlyBootstrap'])
.controller('MainController', function() {
var vm = this;
vm.model = {};
var languages = [
{ name : 'English', level : 'native' },
{ name : 'Spanish', level : 'good' }
];
var createOptionTmpl = function(value) {
return {
name: value,
value: value
};
};
/*
console.log(languages.map(function(lang) {
return {
name: lang.level,
value: lang.level
};
}));*/
vm.fields = [{
className: 'col-xs-4',
type: 'select',
key: 'languages.name',
templateOptions: {
label: 'Some label',
options: languages.map(function(lang) {
return createOptionTmpl(lang.name);
}), //[...data there...],
required: true
}
}, {
className: 'col-xs-8 btn-radio-language',
type: 'radio',
key: 'languages.level',
templateOptions: {
label: 'Proficiency',
options: languages.map(function(lang) {
return createOptionTmpl(lang.level);
})
}
}];
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/api-check/7.5.5/api-check.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly/7.3.9/formly.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/6.2.0/angular-formly-templates-bootstrap.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as vm">
<form ng-submit="vm.onSubmit()">
<formly-form model="vm.model" fields="vm.fields"></formly-form>
<button class="btn btn-primary">
submit
</button>
</form>
{{vm.model}}
</div>
In my controller I have this code:
$scope.lists = [{
listName: 'list1'
}, {
listName: 'list2'
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}];
});
The Input from lists cames from a webservice, so the values (list1 and list2) can be different each time i reload the app. I can also more then 2 items in lists.
How can I show the value from $scope[listName] in an ng-repat section in my view?
Thanks for your Help.
Stefan.
You might try something like this:
(function() {
angular.module("myApp", []).controller("controller", ["$scope",
function($scope) {
$scope.lists = [{
listName: "list1"
}, {
listName: "list2"
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}];
$scope.results = $scope[listName];
});
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp">
<div data-ng-controller="controller">
<ul>
<li data-ng-repeat="item in results">{{item.Name}}</li>
</ul>
</div>
</div>
I'm using Angular Google Chart but i do not know how to add a select event.
In the API Doc can be seen the method 'registerWrapperListener', but i dont used it
Some idea to add select-event in this example?
Thanks you
'use strict';
angular.module('google-chart-example', ['googlechart']).controller("MainCtrl", function($scope) {
var chart1 = {};
chart1.type = "OrgChart";
chart1.cssStyle = "height:200px; width:300px;";
chart1.data = {
cols: [{
id: 'Name',
label: 'Name',
type: 'string'
}, {
id: 'Manager',
label: 'Manager',
type: 'string'
}, {
id: 'ToolTip',
label: 'ToolTip',
type: 'string'
}],
rows: [{
c: [{
v: '0',
f: 'CEO'
}, {
v: ''
}, {
v: 'The CEO'
}]
}, {
c: [{
v: '1',
f: 'worker 1'
}, {
v: '0'
}, {
v: ''
}]
}]
};
$scope.chart = chart1;
});
<html xmlns="http://www.w3.org/1999/html">
<body ng-app="google-chart-example" ng-controller="MainCtrl">
<div>
<div google-chart chart="chart" style="{{chart.cssStyle}}" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<script src="example.js"></script>
</body>
</html>
In your html code, it would be:
<div google-chart chart="chart" style="{{chart.cssStyle}}" on-select="selectCallbackMethodYouWant(selectedItem)" />
How to use ng-options.
$scope.fieldTable = [
{
filed:"text",
title:"Global"
},
{
field: "relatedentity",
title: "Entity"
},
{
field:"title",
title:"Title"
},
{
field: "content",
title: "Content"
}
]
I want to build a which use the title as displayed and when select something, popout a alert window which display the according field. The initial selection is
{
filed:"text",
title:"Global"
}
Can anyone help?
var app = angular.module('stack', []);
app.controller('MainCtrl', function($scope) {
$scope.fieldTable = [{
field: "text",
title: "Global"
}, {
field: "relatedentity",
title: "Entity"
}, {
field: "title",
title: "Title"
}, {
field: "content",
title: "Content"
}];
$scope.selected = $scope.fieldTable[0];
$scope.hasChanged = function() {
alert($scope.selected.field);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="stack" ng-controller="MainCtrl">
<select ng-options="item.title for item in fieldTable" ng-model="selected" ng-change="hasChanged()">
</select>
</body>
You can use ng-change to do that
<select ng-options="item.title as item.title for item in fieldTable track by item.title" ng-model="selected" ng-change="onChanged()">
then in your onChange() method in the controller you can do whatever you want it to do :) In your case , show an alert with the value
edit:
https://plnkr.co/edit/4csDtFVH5mKd7Xr39WtG?p=preview
I need to create bar chart showing up various values, such as "Created", "Closed", "Submitted" data with count on Y Axis and dates on x axis.
I am able to do this successfully, for any one criteria. However I am not able to get multiple bars being shown.
Below is the code I am using currently:
<!DOCTYPE html>
<html>
<head>
<title>Defect Trend App</title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
return this.createTrendChart();
},
createTrendChart: function() {
var ProjectOid;
ProjectOid = this.getContext().getProject().ObjectID;
var ReleaseOID = <My Release ID>;
Ext.define('My.TrendCalc', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
getMetrics: function() {
return [
{
as: 'Defects',
display: 'column',
f: 'count'
}
];
}
});
this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: {
find: {
_TypeHierarchy: "Defect",
State: {
$lt: "Closed"
},
_ProjectHierarchy: ProjectOid,
Release: ReleaseOID
},
fetch: ["_ValidFrom", "_ValidTo", "ObjectID"]
},
calculatorType: 'My.TrendCalc',
calculatorConfig: {},
chartConfig: {
chart: {
zoomType: 'x',
type: 'column'
},
title: {
text: 'Defects over Time'
},
xAxis: {
type: 'datetime',
minTickInterval: 1
},
yAxis: {
title: {
text: 'Number of Defects'
}
}
}
});
return this.add(this.myTrendChart);
}
});
}).call(this);
Rally.launchApp('CustomApp', {
name:"Defect Trend App",
parentRepos:""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
I do not consider myself an expert in this area, but I believe this will work for you...
I took your code as a base and modified it based on some other code to get what I think appears to be a working version of what you want. Below is a screenshot of the code running in Rally.
The data I had did not have a lot of variance in the series (most were released) so it looks uninteresting.
You will probably want to exclude the final state (as I believe you did in your code via the $lt:'Completed'... which i changed to $lte:'Completed' temporarily).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>
Defect Trend App </title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
var states = ['Accepted','Released']; // all enum values for 'State'
var field = 'ScheduleState'; // or 'State'
var ReleaseOID = XXXXXX; // your release Oid
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
return this.createTrendChart();
},
createTrendChart: function() {
var ProjectOid;
ProjectOid = this.getContext().getProject().ObjectID;
Ext.define('My.TrendCalc', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
getDerivedFieldsOnInput: function() {
var m = _.map(states, function(state) {
return {
"as": state,
"f" : function(snapshot) {
var value = (snapshot[field] == state) ? 1 : 0;
return value;
}
}
})
return m;
},
getMetrics : function() {
var m = _.map(states, function(state) {
return {
field: state,
as: state,
f: 'sum'
}
})
return m;
}
});
this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: {
find: {
_TypeHierarchy: "Defect",
State: {$lte: "Closed" },
_ProjectHierarchy: ProjectOid,
Release: ReleaseOID
},
fetch: ["_ValidFrom", "_ValidTo", "ObjectID", field],
hydrate: [field],
sort: { "_ValidFrom" : 1}
},
calculatorType: 'My.TrendCalc',
calculatorConfig : {},
chartConfig: {
chart: {
zoomType: 'xy',
type:'column'
},
title: {
text: 'Defects over Time'
},
xAxis: {
type: 'datetime',
title: { text: 'When'},
minTickInterval: 5,
labels : { rotation: 90 }
},
yAxis: { title: { text: 'Count' } },
plotOptions: {
series: {
stacking: 'normal'
}
}
}
});
return this.add(this.myTrendChart);
}
});
});
console.log("launching application");
Rally.launchApp('CustomApp', {
name:'Defect Trend App',
parentRepos:""
});
</script>
</head>
<body>
</body>
Pastebin - http://pastebin.com/Vf6jniGZ
I'm not familiar with Rally's App SDK wrappers, but I'm the primary author of Lumenize where the TimeSeriesCalculator comes from. Your situation is exactly what the group-by functionality in Lumenize.TimeSeriesCalculator was designed for. See the documentation for a careful walkthrough of how the TimeSeriesCalculator works. Look at the second example titled, "Time-series group-by example". Also, here is a functioning jsfiddle of that group-by example.
The key bit that you need is:
metrics = [
...
{f: 'groupByCount', groupByField: 'ScheduleState', allowedValues: allowedValues, prefix: 'Count '},
...
]