Match ID with Array number and assign key knockout js - javascript

So I have an array called domains which returns a variation of data, among which is a category spanding from 0-12.
It looks something like:
domains: {
0 {
available : true
category : 0
}
1 {
available : true
category : 1
}
2 {
available : true
category : 2
}
3 {
available : true
category : 3
}
4 {
available : true
category : 4
}
}
Then I have the following keys:
categoryLabels {
0 : Professional
1 : Government
2 : Finance
3 : Business
4 : Colors
}
Now what I would like to do is to display the matchin category with the matching categoryLabel
I have tried this but it doesnt seem to work:
for (key in this.categoryLabels) {
var item = {
name: key, // Push the key on the array
value: this.categoryLabels[key] // Push the key's value on the array
};
return this.categoryName;
console.log(this.categoryName.value);
}
Does anyone have a solution ?


I tweaked your sample data assuming you are having a valid Data .
view:
<div data-bind="foreach:dom.domains">
<p> available</p> : <b data-bind="text:available"></b>
<p> category </p> : <b data-bind="text:ctgry.categoryLabels[category]">
</div>
code:
var dom = {
'domains': [{
'available': true,'category': 0}, {'available': true, 'category': 1 },{'available': true,'category': 2 },{ 'available': true,'category': 3},{'available': true, 'category': 4
}]
};
var ctgry = {
'categoryLabels': { 0: 'Professional',1: 'Government', 2: 'Finance',3: 'Business',4: 'Colors',
}
}
ko.applyBindings({ //pass your json data here
dom,
ctgry
});
sample fiddle up for grabs
PS: Instead of passing json data directly to ko,however you can have your viewModel created and store it in observable & bind to view.

Related

Little trouble customizing and saving Diagram Builder in AlloyUI 3.03

Can u help me customizing node and relative css of AllouUI DiagramBuilder ?
After a few attempts and thanks above all to the help of the previous posts on the same tool
AlloyUI (diagram-builder) extends
Add custom node to Alloyui DiagramBuilder in JAVA
How to add custom nodes and properties to AlloyUI diagram builder
I managed to create new custom nodes but CSS doesn't work as I expect:
If I modify the NAME attribute of the node, obtaining the application of the style defined by the CSS sheet (only the color at the moment) but I lose
enabling the Settings tab.
If I extend the css class diagram-node (.diagramnode;) with the desired background, the change is ignored.
JS:
<script type="text/javascript">
YUI().use('aui-diagram-builder',
function(Y) {
//definizione del nuovo DropDown
Y.CustomDropDownCellEditor = Y.Component
.create({
NAME : 'CustomDropDownCellEditor',
EXTENDS : Y.DropDownCellEditor
});
//definizione del nuovo nodo
Y.DiagramNodeCustomWithDropDown = Y.Component
.create({
NAME : 'diagram-node',
ATTRS : {
type : {
value : 'customTaskWithDropDown'
},
currency : {
validator : Y.Lang.isValue
}
},
EXTENDS : Y.DiagramNodeTask,
prototype : {
initializer : function() {
this.SERIALIZABLE_ATTRS
.push('choseOne');
},
//configura ed inserisce la dropDown
getPropertyModel : function() {
var model = Y.DiagramNodeTask.superclass.getPropertyModel
.apply(this, arguments);
var values = new Y.CustomDropDownCellEditor(
{
options : {
dollar : 'Dollar',
euro : 'Euro',
yen : 'Yen',
gold : 'Gold'
}
});
model
.push({
name : 'Currency',
attributeName : 'currency',
editor : values
});
return model;
}
}
});
//definiziane del secondo nodo custom
Y.DiagramNodeCustomWithTwoMoreField = Y.Component
.create({
NAME : 'diagram-node',
ATTRS : {
type : {
value : 'customWithTwoMoreField'
},
price : {
validator : Y.Lang.isString,
value : 'A Custom default'
},
cost : {
validator : Y.Lang.isString,
value : 'A Custom default'
}
},
EXTENDS : Y.DiagramNodeTask,
prototype : {
getPropertyModel : function() {
var model = Y.DiagramNodeTask.superclass.getPropertyModel
.apply(this,
arguments);
model
.push({
attributeName : 'price',
name : 'Price'
});
model.push({
attributeName : 'cost',
name : 'Cost'
});
return model;
}
}
});
Y.DiagramBuilder.types['customTaskWithDropDown'] = Y.DiagramNodeCustomWithDropDown;
Y.DiagramBuilder.types['customWithTwoMoreField'] = Y.DiagramNodeCustomWithTwoMoreField;
//ORIGINALE
var availableFields = [
....., {
iconClass : 'diagram-node-task-icon',
label : 'Limited Chose',
type : 'customTaskWithDropDown'
}, {
iconClass : 'diagram-node-state-icon',
label : 'Description State',
type : 'customWithTwoMoreField'
} .....
];
new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : [ {
name : 'HellGate',
type : 'start',
xy : [ 10, 10 ]
} ],
srcNode : '#DiagramBuilderBuilder'
}).render();
});
CSS:
.customdropdowncelleditor-hidden {
display: none;
}
.diagramnodecustomwithdropdown {
background-color: #00FFFF ;
}
.diagramnodecustomwithtwomorefield {
background-color: #FF0090 ;
}
How can I define two different styles for the DiagramNodeCustomWithDropDown and DiagramNodeCustomWithTwoMoreField nodes? I need to define background and border, nothing more for now.

To proceed further I am now trying to save the diagram on my database in json format (logically passing through a form and a servlet)
the obstacle in front of me is:
how do I save the result of the JS function on an hidden input:
Y.DiagramBuilder().toJSON() ??
perhaps it is useful to know that I am working in Liferay 7.1 ...
Here is my JSP page:
<div id="DiagramBuilderContainer">
<div id="DiagramBuilderBuilder"></div>
<div>
<portlet:actionURL var="editDiagramCampaign" name="editDiagramCampaign" >
<portlet:param name="mvcPath" value="/campaign-aui-diagramBuilder.jsp" />
<portlet:param name="redirect" value="<%=currentURL%>" />
<portlet:param name="campaignId" value="<%=String.valueOf(campaignId)%>" />
</portlet:actionURL>
<aui:form action="<%=editDiagramCampaign%>" method="post" name="saveDiagramForm">
<aui:model-context bean="<%=campaign%>" model="<%= Campaign.class %>" />
<aui:button-row>
<aui:input type="hidden" id="diagramBuilderHiddenJSON" name="diagramBuilderHiddenJSON" value="" />
<aui:button type="submit" id="saveDiagram" name="saveDiagram" value="Salva Diagramma"
onClick="updateDiagramBuilderHiddenJSON();" primary="true" />
</aui:button-row>
</aui:form>
</div>
</div>
<script type="text/javascript">
YUI().use('aui-diagram-builder',
function(Y) { ( *read above if u need it*) });
</script>
UPDATE:
Here the solution:
var availableFields = [ {...}, {...}, {...}, {...}, {...} ];
/** RETRIVE SAVED JSON DIAGRAM OR CREATE NEW ONE **/
var diagramBuilderObj = null;
var _campaignDiagramJSON = JSON.parse( '<%=campaignDiagramJSON%>' ) ;
if ( _campaignDiagramJSON && _campaignDiagramJSON != "" ) {
diagramBuilderObj = new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : _campaignDiagramJSON.nodes,
srcNode : '#DiagramBuilderBuilder'
}) ;
diagramBuilderObj.render();
} else {
diagramBuilderObj = new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : [ {
name : 'Start Here',
type : 'start',
xy : [ 10, 10 ]
} ],
srcNode : '#DiagramBuilderBuilder'
});
diagramBuilderObj.render();
}
/** SAVE MODIFIED JSON DIAGRAM TROUGH FORM **/
Y.one('#<portlet:namespace/>'+'saveDiagramButton').on('click', function() {
Y.one('#<portlet:namespace/>'+'diagramBuilderHiddenJSON').set('value', JSON.stringify( diagramBuilderObj.toJSON() ) );
});
NEW UPDATE:
Damn, it's not over yet...
and here I really ran out of ideas and can't find support elsewhere:
the conversion to json and the saving on db works but the recovery from json fails with the following error
TypeError: n.get(...) is undefined[Ulteriori informazioni] combo:15:2351
prepareTransition http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:15
_setTransitions http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:16
forEach self-hosted:262
forEach jQuery
_setTransitions http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:16
jQuery 7
syncConnectionsUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:15
syncConnectionsUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-diagram-node-start/aui-diagram-node-start-min.js&/o/frontend-js-web/aui/aui-diagram-node-task/aui-diagram-node-task-min.js&/o/frontend-js-web/aui/aui-diagram-builder/aui-diagram-builder-min.js:3
each jQuery
forEach self-hosted:262
jQuery 2
syncConnectionsUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-diagram-node-start/aui-diagram-node-start-min.js&/o/frontend-js-web/aui/aui-diagram-node-task/aui-diagram-node-task-min.js&/o/frontend-js-web/aui/aui-diagram-builder/aui-diagram-builder-min.js:3
syncUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-diagram-node-start/aui-diagram-node-start-min.js&/o/frontend-js-web/aui/aui-diagram-node-task/aui-diagram-node-task-min.js&/o/frontend-js-web/aui/aui-diagram-builder/aui-diagram-builder-min.js:3
renderer http://localhost:8080/combo?browserId=firefox&minifierType=js&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js&/o/frontend-js-web/aui/event-outside/event-outside.js&/o/frontend-js-web/aui/event-resize/event-resize.js&/o/frontend-js-web/aui/event-simulate/event-simulate.js&/o/frontend-js-web/aui/event-synthetic/event-synthetic.js&/o/frontend-js-web/aui/intl/intl.js&/o/frontend-js-web/aui/io-base/io-base.js&/o/frontend-js-web/aui/io-form/io-form.js&/o/frontend-js-web/aui/io-queue/io-queue.js&/o/frontend-js-web/aui/io-upload-iframe/io-upload-iframe.js&/o/frontend-js-web/aui/io-xdr/io-xdr.js&/o/frontend-js-web/aui/json-parse/json-parse.js&/o/frontend-js-web/aui/json-stringify/json-stringify.js&/o/frontend-js-web/aui/node-base/node-base.js&/o/frontend-js-web/aui/node-core/node-core.js&/o/frontend-js-web/aui/node-event-delegate/node-event-delegate.js&/o/frontend-js-web/aui/node-event-simulate/node-event-simulate.js&/o/frontend-js-web/aui/node-focusmanager/node-focusmanager.js&/o/frontend-js-web/aui/node-pluginhost/node-pluginhost.js&/o/frontend-js-web/aui/node-screen/node-screen.js&/o/frontend-js-web/aui/node-style/node-style.js&/o/frontend-js-web/aui/oop/oop.js&/o/frontend-js-web/aui/plugin/plugin.js&/o/frontend-js-web/aui/pluginhost-base/pluginhost-base.js&/o/frontend-js-web/aui/pluginhost-config/pluginhost-config.js&/o/frontend-js-web/aui/querystring-stringify-simple/querystring-stringify-simple.js&/o/frontend-js-web/aui/queue-promote/queue-promote.js&/o/frontend-js-web/aui/selector-css2/selector-css2.js&/o/frontend-js-web/aui/selector-css3/selector-css3.js&/o/frontend-js-web/aui/selector-native/selector-native.js&/o/frontend-js-web/aui/selector/selector.js&/o/frontend-js-web/aui/widget-base/widget-base.js&/o/frontend-js-web/aui/widget-htmlparser/widget-htmlparser.js&/o/frontend-js-web/aui/widget-skin/widget-skin.js:11923
_defRenderFn http://localhost:8080/combo?browserId=firefox&minifierType=js&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js&/o/frontend-js-web/aui/event-outside/event-outside.js&/o/frontend-js-web/aui/event-resize/event-resize.js&/o/frontend-js-web/aui/event-simulate/event-simulate.js&/o/frontend-js-web/aui/event-synthetic/event-synthetic.js&/o/frontend-js-web/aui/intl/intl.js&/o/frontend-js-web/aui/io-base/io-base.js&/o/frontend-js-web/aui/io-form/io-form.js&/o/frontend-js-web/aui/io-queue/io-queue.js&/o/frontend-js-web/aui/io-upload-iframe/io-upload-iframe.js&/o/frontend-js-web/aui/io-xdr/io-xdr.js&/o/frontend-js-web/aui/json-parse/json-parse.js&/o/frontend-js-web/aui/json-stringify/json-stringify.js&/o/frontend-js-web/aui/node-base/node-base.js&/o/frontend-js-web/aui/node-core/node-core.js&/o/frontend-js-web/aui/node-event-delegate/node-event-delegate.js&/o/frontend-js-web/aui/node-event-simulate/node-event-simulate.js&/o/frontend-js-web/aui/node-focusmanager/node-focusmanager.js&/o/frontend-js-web/aui/node-pluginhost/node-pluginhost.js&/o/frontend-js-web/aui/node-screen/node-screen.js&/o/frontend-js-web/aui/node-style/node-style.js&/o/frontend-js-web/aui/oop/oop.js&/o/frontend-js-web/aui/plugin/plugin.js&/o/frontend-js-web/aui/pluginhost-base/pluginhost-base.js&/o/frontend-js-web/aui/pluginhost-config/pluginhost-config.js&/o/frontend-js-web/aui/querystring-stringify-simple/querystring-stringify-simple.js&/o/frontend-js-web/aui/queue-promote/queue-promote.js&/o/frontend-js-web/aui/selector-css2/selector-css2.js&/o/frontend-js-web/aui/selector-css3/selector-css3.js&/o/frontend-js-web/aui/selector-native/selector-native.js&/o/frontend-js-web/aui/selector/selector.js&/o/frontend-js-web/aui/widget-base/widget-base.js&/o/frontend-js-web/aui/widget-htmlparser/widget-htmlparser.js&/o/frontend-js-web/aui/widget-skin/widget-skin.js:11897
jQuery 3
render http://localhost:8080/combo?browserId=firefox&minifierType=js&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js&/o/frontend-js-web/aui/event-outside/event-outside.js&/o/frontend-js-web/aui/event-resize/event-resize.js&/o/frontend-js-web/aui/event-simulate/event-simulate.js&/o/frontend-js-web/aui/event-synthetic/event-synthetic.js&/o/frontend-js-web/aui/intl/intl.js&/o/frontend-js-web/aui/io-base/io-base.js&/o/frontend-js-web/aui/io-form/io-form.js&/o/frontend-js-web/aui/io-queue/io-queue.js&/o/frontend-js-web/aui/io-upload-iframe/io-upload-iframe.js&/o/frontend-js-web/aui/io-xdr/io-xdr.js&/o/frontend-js-web/aui/json-parse/json-parse.js&/o/frontend-js-web/aui/json-stringify/json-stringify.js&/o/frontend-js-web/aui/node-base/node-base.js&/o/frontend-js-web/aui/node-core/node-core.js&/o/frontend-js-web/aui/node-event-delegate/node-event-delegate.js&/o/frontend-js-web/aui/node-event-simulate/node-event-simulate.js&/o/frontend-js-web/aui/node-focusmanager/node-focusmanager.js&/o/frontend-js-web/aui/node-pluginhost/node-pluginhost.js&/o/frontend-js-web/aui/node-screen/node-screen.js&/o/frontend-js-web/aui/node-style/node-style.js&/o/frontend-js-web/aui/oop/oop.js&/o/frontend-js-web/aui/plugin/plugin.js&/o/frontend-js-web/aui/pluginhost-base/pluginhost-base.js&/o/frontend-js-web/aui/pluginhost-config/pluginhost-config.js&/o/frontend-js-web/aui/querystring-stringify-simple/querystring-stringify-simple.js&/o/frontend-js-web/aui/queue-promote/queue-promote.js&/o/frontend-js-web/aui/selector-css2/selector-css2.js&/o/frontend-js-web/aui/selector-css3/selector-css3.js&/o/frontend-js-web/aui/selector-native/selector-native.js&/o/frontend-js-web/aui/selector/selector.js&/o/frontend-js-web/aui/widget-base/widget-base.js&/o/frontend-js-web/aui/widget-htmlparser/widget-htmlparser.js&/o/frontend-js-web/aui/widget-skin/widget-skin.js:11881
<anonima> http://localhost:8080/group/guest/~/control_panel/manage?p_p_id=it_treeffe_feedback_web_portlet_CampaignManagementPortlet&p_p_lifecycle=0&p_p_state=maximized&p_p_mode=view&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_redirect=http://localhost:8080/group/guest/~/control_panel/manage?p_p_id=it_treeffe_feedback_web_portlet_CampaignManagementPortlet&p_p_lifecycle=0&p_p_state=maximized&p_p_mode=view&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_mvcPath=%2Fview_campaign_crud_mngToolbar.jsp&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_cur=1&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_delta=10&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_orderByCol=modifiedDate&p_p_auth=O2ifcGJf&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_mvcPath=/campaign-aui-diagramBuilder.jsp&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_campaignId=109&p_p_auth=O2ifcGJf line 355 > scriptElement:143
jQuery 34
The script of the diagram Builder is above, and then i leave a json for a nonsense diagram used for the test.
JSON:
{"nodes":[{"transitions":[{"source":"Tutto Comincia Qui","target":"fork1259","uid":"yui_patched_v3_18_1_2_1554213706673_1417","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector1433","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[657.7999877929688,255.10000610351562],"p2":[988,344]}}],"description":"","name":"Tutto Comincia Qui","required":false,"type":"start","width":40,"height":40,"zIndex":100,"xy":[10,10]},{"transitions":[{"source":"fork1259","target":"condition1779","uid":"yui_patched_v3_18_1_2_1554213706673_1937","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector1953","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1013,369],"p2":[898,482]}},{"source":"fork1259","target":"condition2254","uid":"yui_patched_v3_18_1_2_1554213706673_2412","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector2428","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1038,344],"p2":[1220,377]}}],"description":"","name":"fork1259","required":false,"type":"fork","width":60,"height":60,"zIndex":100,"xy":[370.20001220703125,91.89999389648438]},{"transitions":[{"source":"condition1779","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_3313","sourceXY":[60,30],"targetXY":[27.199951171875,4.9000091552734375],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector3329","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[908,492],"p2":[1069.800048828125,621.0999755859375]}},{"source":"condition1779","target":"state3603","uid":"yui_patched_v3_18_1_2_1554213706673_3761","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector3777","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[883,517],"p2":[874.7999877929688,679.0999755859375]}}],"description":"","name":"condition1779","required":false,"type":"condition","width":60,"height":60,"zIndex":100,"xy":[240.20001220703125,239.89999389648438]},{"transitions":[{"source":"condition2254","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_2948","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector2964","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1245,402],"p2":[1129.800048828125,621.0999755859375]}},{"source":"condition2254","target":"state4334","uid":"yui_patched_v3_18_1_2_1554213706673_4492","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector4508","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1245,402],"p2":[1302.800048828125,667.0999755859375]}}],"description":"","name":"condition2254","required":false,"type":"condition","width":60,"height":60,"zIndex":100,"xy":[602.2000122070312,124.90000915527344]},{"transitions":[{"source":"customTaskWithDropDown2790","target":"customStateWithTwoMoreField7588","uid":"yui_patched_v3_18_1_2_1554213706673_7746","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector7762","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1129.800048828125,681.0999755859375],"p2":[1130,788]}}],"description":"","name":"customTaskWithDropDown2790","required":false,"type":"customTaskWithDropDown","width":70,"height":70,"zIndex":100,"xy":[452.20001220703125,394.90000915527344]},{"transitions":[{"source":"state3603","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_7246","sourceXY":[37.20001220703125,20.899993896484375],"targetXY":[7.199951171875,45.899993896484375],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector7262","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[887.7999877929688,692.0999755859375],"p2":[1069.800048828125,681.0999755859375]}}],"description":"","name":"state3603","required":false,"type":"state","width":40,"height":40,"zIndex":100,"xy":[240,452]},{"transitions":[{"source":"state4334","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_6965","sourceXY":[1.199951171875,18.899993896484375],"targetXY":[65.199951171875,34.899993896484375],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector6981","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1289.800048828125,682.0999755859375],"p2":[1129.800048828125,681.0999755859375]}}],"description":"","name":"state4334","required":false,"type":"state","width":40,"height":40,"zIndex":100,"xy":[672.2000122070312,440.90000915527344]},{"transitions":[{"source":"customStateWithTwoMoreField7588","target":"end8225","uid":"yui_patched_v3_18_1_2_1554213706673_8383","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector8399","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1113,801],"p2":[942,789]}}],"description":"","name":"customStateWithTwoMoreField7588","required":false,"type":"customStateWithTwoMoreField","width":40,"height":40,"zIndex":100,"xy":[495.20001220703125,560.8999938964844]},{"transitions":[],"description":"","name":"end8225","required":false,"type":"end","width":40,"height":40,"zIndex":100,"xy":[294.20001220703125,543.9000091552734]}]}
Is there anyone who can help me?
LAST UPDATE (SOLUTION):
I have published the solution in my comment HERE
Have a nice day!

AngularJS + select2 - How to set initial value

I want to use Select2 in my AngularJS project, So I added an input like this :
<select class="find-neighborhood js-states form-control"
ng-model="regionIdentifier"
ng-init="">
</select>
Luckily , Whenever regionIdentifier is change, I find out. Actually I want to set initial value in my Select2. Here is my javascript code :
$(".find-neighborhood").select2({
dir: "rtl",
placeholder: "find neighborhood ...",
allowClear: true,
data: $scope.regions
});
My $scope.regions looks like :
[object,object,object]
Each object is like :
0 :Object
id:52623
regionSlug:yvuj
text:yvuj1
How to init value in my select2?

You should create a directive to make this work globally and fine. Here is a simple example which let you initialize a select2 set the default option values to your selection. You can find a working version on plnkr. While select2 depends on jQuery you may will look for an other lib to make it work. Some dev's preffer to have no jQuery included in AngularJS projects.
Controller
//option list
$scope.regions = {
'test1' : {
id: 1
},
'test2' : {
id: 2
},
'test3' : {
id: 3
},
'test4' : {
id: 4
},
'test5' : {
id: 5
}
};
//model & selected value setup
$scope.regionIdentifier = 3;
View
<select class="js-example-basic-single"
ng-model="regionIdentifier"
items="regions"
items-selected="regionIdentifier"
id="regionSelection"
select-two>
</select>
Directive
/**
* Simple select2 directive
*/
angular.module('app').directive('selectTwo', ['$timeout', function($timeout){
return {
restrict : 'EA',
transclude : true,
terminal: true,
templateUrl : 'views/directive/select2.html',
scope: {
items: "=",
itemsSelected: "="
},
link: function($scope, $element, $attrs, $controller){
//format options https://select2.github.io/select2/#documentation
function format(state) {
//init default state
var optionTemplate = state.text;
if (!state.id || state.id == 0) { //option group or no selection item
return optionTemplate;
}
return optionTemplate;
}
//init on load
$timeout(function(){
//if multiple options are possible, parse an comma seperated list into itemsSelected like 1,2,5,23,21
if (angular.isString($scope.itemsSelected) && $scope.itemsSelected.split(',').length > 1) {
$scope.itemsSelected = $scope.itemsSelected.split(',');
}
$($element[0]).select2({
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) { return m; }
}).val($scope.itemsSelected == undefined ? [0]: [$scope.itemsSelected]).trigger("change");
});
}
};
}]);
Directive template views/directive/select2.html
<option ng-repeat="(name, item) in items track by $index"
value="{{ item.id }}">
{{ name }}
</option>

Using AngularJS to get the count of a sub array

Basically I'm making a todo list with angular and I want to display the how many items have been marked as done I have an array object of Lists and each list has a collection of list items called todos like so:
[{listName: "ESSENTIALS", newTodoName:"", newTodoQ:"0", todos: [
{ taskName : "Comb" , quantity: 1, isDone : false , id: "comb" } ]},
{listName: "TOILETRIES", newTodoName:"", newTodoQ:"0", todos: [
{ taskName : "Tooth Brush" , quantity: 1, isDone : false , id: "toothbrush"},
{ taskName : "Tooth paste" , quantity: 6, isDone : false, id: "toothpaste" },
{ taskName : "Deodorant" , quantity: 3, isDone : false, id: "deodorant" }
]}];
So I have two ng-repeats.. One repeats the Lists then another inside of it prints out each list item. I have an H1 and next to the title I want to have the the items that were marked isDone as true next to the total amount of records to show how many items you have left. As you can see I started to code up a filter but I believe it's wrong I keep getting: "Syntax Error: Token 'undefined' is unexpected, expecting [}] at column null of the expression [ (list.todos |] starting at [{4}]." which I'm not really sure what that means...my fourth item is blank? Yet I have all my todos there and they are not blank. Is my filter wrong? or a better way to do this?
<div class='row' ng-repeat="list in lists">
<h1 class='centerTitle'>{{list.listName}} <span class="listCounter"> {{ (list.todos | filter:{todos: {isDone: true}}: true).length }} / {{list.todos.length}}</span></h1>
<ul ui-sortable="todoSortable" ng-model="list.todos">
<li ng-class="{taskDone: todo.isDone}" class="todoTask" ng-repeat="todo in list.todos | orderBy: 'isDone' "></li>
<div>

Can you try:
<h1 class='centerTitle'>{{list.listName}} <span class="listCounter"> {{ (list.todos | filter: {isDone: true}).length }} / {{list.todos.length}}</span></h1>

Dgrid formatter create column based on values in another column

I am creating a dgrid based on a data source which has an address and two columns with Boolean values which identifies what type of address is in the record, either postal address or business address.
I would like to display a descriptive name for the Boolean values in another column (Address Type) based on the two Boolean columns. I am trying to use the dgrid formatter function however i am unable to get the desired results. Under is my code:
Javascript
function getAddressType(){
$.each(employeeAddressData, function(key, value){
if(key == "postalAddress"){
if(value == true || value == 'true'){
console.log('returning postal');
return 'Postal';
}
}else{
console.log('returning business');
return 'Business';
}
});
}
var Employer = [{id: 1, businessName:'John Doe and Sons Limited',phone:'123456',address:'123 Long Street', postalAddress:true, businessAddress:false},
{id: 1, businessName:'Alice and Bob Limited',phone:'78956', address:'56 Short Street', postalAddress:false, businessAddress:true}];
var employerGrid = new CustomGrid({
store: employerStore,
columns:{
id:{
label:"Id",
field:"id",
hidden:true
},
businessName:{
label:"Business",
field:"businessName",
},
phone:{
label:"Contact No.",
field:"phone",
},
address:{
label:"Address",
field:"address",
},
addressType:{
label:"Address Type",
formatter:getAddressType();
}
},
selectionMode:"none",
loadingMessage: "Loading data...",
noDataMessage: "No results found....",
allowSelectAll: true
}, "employerGrid");

I realized dgrid has a get function which i can use to access the datasource attributes. So formatter was not needed instead get was used. Under is my solution :
Javascript
},
addressType:{
label:"Address Type",
get: function(object){
if(object.postalAddress == true){
return 'Postal';
}else{
return 'Business';
}
}
}

apply formatting filter dynamically in a ng-repeat

My goal is to apply a formatting filter that is set as a property of the looped object.
Taking this array of objects:
[
{
"value": "test value with null formatter",
"formatter": null,
},
{
"value": "uppercase text",
"formatter": "uppercase",
},
{
"value": "2014-01-01",
"formatter": "date",
}
]
The template code i'm trying to write is this:
<div ng-repeat="row in list">
{{ row.value | row.formatter }}
</div>
And i'm expecting to see this result:
test value with null formatter
UPPERCASE TEXT
Jan 1, 2014
But maybe obviusly this code throws an error:
Unknown provider: row.formatterFilterProvider <- row.formatterFilter
I can't immagine how to parse the "formatter" parameter inside the {{ }}; can anyone help me?
See the plunkr http://plnkr.co/edit/YnCR123dRQRqm3owQLcs?p=preview

The | is an angular construct that finds a defined filter with that name and applies it to the value on the left. What I think you need to do is create a filter that takes a filter name as an argument, then calls the appropriate filter (fiddle) (adapted from M59's code):
HTML:
<div ng-repeat="row in list">
{{ row.value | picker:row.formatter }}
</div>
Javascript:
app.filter('picker', function($filter) {
return function(value, filterName) {
return $filter(filterName)(value);
};
});
Thanks to #karlgold's comment, here's a version that supports arguments. The first example uses the add filter directly to add numbers to an existing number and the second uses the useFilter filter to select the add filter by string and pass arguments to it (fiddle):
HTML:
<p>2 + 3 + 5 = {{ 2 | add:3:5 }}</p>
<p>7 + 9 + 11 = {{ 7 | useFilter:'add':9:11 }}</p>
Javascript:
app.filter('useFilter', function($filter) {
return function() {
var filterName = [].splice.call(arguments, 1, 1)[0];
return $filter(filterName).apply(null, arguments);
};
});

I like the concept behind these answers, but don't think they provide the most flexible possible solution.
What I really wanted to do and I'm sure some readers will feel the same, is to be able to dynamically pass a filter expression, which would then evaluate and return the appropriate result.
So a single custom filter would be able to process all of the following:
{{ammount | picker:'currency:"$":0'}}
{{date | picker:'date:"yyyy-MM-dd HH:mm:ss Z"'}}
{{name | picker:'salutation:"Hello"'}} //Apply another custom filter
I came up with the following piece of code, which utilizes the $interpolate service into my custom filter. See the jsfiddle:
Javascript
myApp.filter('picker', function($interpolate ){
return function(item,name){
var result = $interpolate('{{value | ' + arguments[1] + '}}');
return result({value:arguments[0]});
};
});

One way to make it work is to use a function for the binding and do the filtering within that function. This may not be the best approach: Live demo (click).
<div ng-repeat="row in list">
{{ foo(row.value, row.filter) }}
</div>
JavaScript:
$scope.list = [
{"value": "uppercase text", "filter": "uppercase"}
];
$scope.foo = function(value, filter) {
return $filter(filter)(value);
};

I had a slightly different need and so modified the above answer a bit (the $interpolate solution hits the same goal but is still limited):
angular.module("myApp").filter("meta", function($filter)
{
return function()
{
var filterName = [].splice.call(arguments, 1, 1)[0] || "filter";
var filter = filterName.split(":");
if (filter.length > 1)
{
filterName = filter[0];
for (var i = 1, k = filter.length; i < k; i++)
{
[].push.call(arguments, filter[i]);
}
}
return $filter(filterName).apply(null, arguments);
};
});
Usage:
<td ng-repeat="column in columns">{{ column.fakeData | meta:column.filter }}</td>
Data:
{
label:"Column head",
description:"The label used for a column",
filter:"percentage:2:true",
fakeData:-4.769796600014472
}
(percentage is a custom filter that builds off number)

Credit in this post to Jason Goemaat.
Here is how I used it.
$scope.table.columns = [{ name: "June 1 2015", filter: "date" },
{ name: "Name", filter: null },
] etc...
<td class="table-row" ng-repeat="column in table.columns">
{{ column.name | applyFilter:column.filter }}
</td>
app.filter('applyFilter', [ '$filter', function( $filter ) {
return function ( value, filterName ) {
if( !filterName ){ return value; } // In case no filter, as in NULL.
return $filter( filterName )( value );
};
}]);

I improved #Jason Goemaat's answer a bit by adding a check if the filter exists, and if not return the first argument by default:
.filter('useFilter', function ($filter, $injector) {
return function () {
var filterName = [].splice.call(arguments, 1, 1)[0];
return $injector.has(filterName + 'Filter') ? $filter(filterName).apply(null, arguments) : arguments[0];
};
});

The newer version of ng-table allows for dynamic table creation (ng-dynamic-table) based on a column configuration. Formatting a date field is as easy as adding the format to your field value in your columns array.
Given
{
"name": "Test code",
"dateInfo": {
"createDate": 1453480399313
"updateDate": 1453480399313
}
}
columns = [
{field: 'object.name', title: 'Name', sortable: 'name', filter: {name: 'text'}, show: true},
{field: "object.dateInfo.createDate | date :'MMM dd yyyy - HH:mm:ss a'", title: 'Create Date', sortable: 'object.dateInfo.createDate', show: true}
]
<table ng-table-dynamic="controller.ngTableObject with controller.columns" show-filter="true" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td ng-repeat="column in $columns">{{ $eval(column.field, { object: row }) }}</td>
</tr>
</table>

I ended up doing something a bit more crude, but less involving:
HTML:
Use the ternary operator to check if there is a filter defined for the row:
ng-bind="::data {{row.filter ? '|' + row.filter : ''}}"
JS:
In the data array in Javascript add the filter:
, {
data: 10,
rowName: "Price",
months: [],
tooltip: "Price in DKK",
filter: "currency:undefined:0"
}, {

This is what I use (Angular Version 1.3.0-beta.8 accidental-haiku).
This filter allows you to use filters with or without filter options.
applyFilter will check if the filter exists in Angular, if the filter does not exist, then an error message with the filter name will be in the browser console like so...
The following filter does not exist: greenBananas
When using ng-repeat, some of the values will be undefined. applyFilter will handle these issues with a soft fail.
app.filter( 'applyFilter', ['$filter', '$injector', function($filter, $injector){
var filterError = "The following filter does not exist: ";
return function(value, filterName, options){
if(noFilterProvided(filterName)){ return value; }
if(filterDoesNotExistInAngular(filterName)){ console.error(filterError + "\"" + filterName + "\""); return value; }
return $filter(filterName)(value, applyOptions(options));
};
function noFilterProvided(filterName){
return !filterName || typeof filterName !== "string" || !filterName.trim();
}
function filterDoesNotExistInAngular(filterName){
return !$injector.has(filterName + "Filter");
}
function applyOptions(options){
if(!options){ return undefined; }
return options;
}
}]);
Then you use what ever filter you want, which may or may not have options.
// Where, item => { name: "Jello", filter: {name: "capitalize", options: null }};
<div ng-repeat="item in items">
{{ item.name | applyFilter:item.filter.name:item.filter.options }}
</div>
Or you could use with separate data structures when building a table.
// Where row => { color: "blue" };
// column => { name: "color", filter: { name: "capitalize", options: "whatever filter accepts"}};
<tr ng-repeat="row in rows">
<td ng-repeat="column in columns">
{{ row[column.name] | applyFilter:column.filter.name:column.filter.options }}
</td>
</tr>
If you find that you require to pass in more specific values you can add more arguments like this...
// In applyFilter, replace this line
return function(value, filterName, options){
// with this line
return function(value, filterName, options, newData){
// and also replace this line
return $filter(filterName)(value, applyOptions(options));
// with this line
return $filter(filterName)(value, applyOptions(options), newData);
Then in your HTML perhaps your filter also requires a key from the row object
// Where row => { color: "blue", addThisToo: "My Favorite Color" };
// column => { name: "color", filter: { name: "capitalize", options: "whatever filter accepts"}};
<tr ng-repeat="row in rows">
<td ng-repeat="column in columns">
{{ row[column.name] | applyFilter:column.filter.name:column.filter.options:row.addThisToo }}
</td>
</tr>

Categories

Resources