We Keep Coding

Angular call function in ng-click defined in object

Got a question about Angularjs and it's ng-repeat/ng-click workings.
So on this system that I'm working on there is a lot of code re-used for datatables, and I'm trying to make a generic template/service to remedy this. Now I'm running into a problem where we have multiple buttons with their own function calls on being clicked.
I've so far got this setup:
My column object defined as so:
var columns = [
{
identifier: "id",
type: "text"
},
{
identifier: "type",
type: "text"
},
{
identifier: "label",
type: "text"
},
{
identifier: "actions",
type: "button",
multi: true,
content: [
{
icon: "fa-globe",
events: {
click: $scope.openMapModal
}
},
{
icon: "fa-list",
events: {
click: $scope.openGroupModal
}
}
]
}
];
And my HTML as following:
<tr ng-repeat="row in table.data" ng-model-instant>
<td ng-repeat="column in table.columns" ng-if="column.type === 'text'">
{{TableService.getByString(row, column.identifier)}}
</td>
<td ng-repeat="column in table.columns" ng-if="column.type === 'button' && column.multi">
<a ng-repeat="button in column.content" class="btn fa {{button.icon}}" ng-click="button.events.click(row)"></a>
</td>
</tr>
Just for completeness, my TableService.getByString and a small table data set:
(note that columns defined above is set by a function into the table object, and I did not include it in the object).
var table = {
data: [
{
id: 0,
label: "foo",
type: "bar"
},
{
id: 1,
label: "one",
type: "bar"
},
{
id: 2,
label: "foo",
type: "two"
}
]
}
function getKeyObj(obj, key) {
var retVal = {
"key": key,
"obj": obj
};
if (retVal.key.indexOf('.') > -1) {
var keyParts = retVal.key.split('.');
retVal.key = keyParts.pop();
while (keyParts.length && (obj = obj[keyParts.shift()])) ;
retVal.obj = obj;
}
return retVal;
}
function getByString(obj, key) {
var ret = getKeyObj(obj, key);
return ret.obj[ret.key];
}
Now the problem that I'm encountering is that my functions are not being called in my ng-click's whenever I click on the buttons.
I've also tried it with settings the function as a string in my column object, but it didn't work either.
Am I going in the right direction with this or do I need to rethink my generalization, and ifso, what alternative is there?

Are you sure $scope.openMapModal is defined at the time you define the columns array? Could it be that you are assigning undefined to the click property instead of a reference to the function?

Adding an item to the top of a Dojo Select dijit, but can't select the second item

I have two Select dijits that are based off the same data store. The first dijit is the required response and the second dijit is an optional response. For the second dijit, I want to add the additional item "None" to the top of the list. However, when I do that, I cannot select the second item in the list. In this JSBin, if you select "General lakebed mapping" in the second dijit, the returned value is the added item "None".
require(["dijit/form/Select",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function (Select, ObjectStore, Memory) {
var data = [
{ id: 0, label: 'General lakebed mapping' },
{ id: 1, label: 'Bathymetry/Digital Elevation Model' },
{ id: 2, label: 'Ferrous object detections/magnetic anomalies' },
{ id: 3, label: 'Ground-truth data' },
{ id: 4, label: 'Lakebed color' },
{ id: 5, label: 'Lakebed surface type, hardness/smoothness/slope' },
{ id: 6, label: 'Sub-bottom geology' }
];
var store = new Memory({
data: data
});
var os = new ObjectStore({ objectStore: store });
var s = new Select({
store: os,
sortByLabel: false
}, "target");
s.startup();
data.unshift({ id: -1, label: 'None' })
store.setData(data);
var s1 = new Select({
store: os,
sortByLabel: false
}, "target1");
s1.startup();
s1.on("change", function () {
console.log("my value: ", this.get("value"))
});
})

Do not use the value 0 as an id. It is a falsey value in JavaScript and I suspect that the Select dijit source treats it somewhere as false and fails. Just use another value in its place.

Traverse through JSON to find tree path

I am creating a treeview UI from the below Json, I have added the properties node-id, parentId to capture
the current expanded structure
I am planning to add a breadcrumb UI component from the selected tree structure.
var tree = [
{ name:"Insights", nodeId :"tree-node-0"},
{ name:"Level1", nodeId :"tree-node-1", parentId: "tree-node-0"},
{ name:"Level2", nodeId :"tree-node-2", parentId:"tree-node-1"},
{ name:"Details", nodeId :"tree-node-10"},
{ name:"SubDetails", nodeId :"tree-node-11", parentId:"tree-node-10"},
{ name:"Summary", nodeId :"tree-node-12", parentId:"tree-node-11"},
];
Below is the tree
Insights
|
|---Level1
|
|--Level2
Details
|
|--SubDetails
|
|--Summary
If the user selectes Summary then i want to create a breadCrumb which display links like Details-->SubDetails-->Summary
. I am assuming to populate the selected structure nodes into an array and then it would be easy to populate breadcrumb from the array.
If the user selects Summary then from the selected node parentId i want to traverse through the JSON array and find the path.
Need help in above logic

var tree = [{
name: "Insights",
nodeId: "tree-node-0"
}, {
name: "Level1",
nodeId: "tree-node-1",
parentId: "tree-node-0"
}, {
name: "Level2",
nodeId: "tree-node-2",
parentId: "tree-node-1"
}, {
name: "Details",
nodeId: "tree-node-10"
}, {
name: "SubDetails",
nodeId: "tree-node-11",
parentId: "tree-node-10"
}, {
name: "Summary",
nodeId: "tree-node-12",
parentId: "tree-node-11"
},
];
function test(Name, testData) {
var testData = testData || [];
var node = tree.find(function(item) {
return item.name == Name;
});
if (node) {
testData.push(node.name);
var parent = tree.find(function(item) {
return item.nodeId == node.parentId;
});
if (parent) {
return test(parent.name, testData);
} else {
return testData;
}
} else {
return testData;
}
}
console.log(test('Summary'));
i added it to display in console , you can check in console
Updated the code

Tree is not displayed propery in DOJO

I am new to DOJO 1.6
I trying to display tree with sub folders.
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.require("dijit.tree.TreeStoreModel");
dojo.require("dojo.store.Memory");
dojo.require("dijit.Tree");
dojo.addOnLoad(function() {
// Create test store, adding the getChildren() method required by ObjectStoreModel
var data = [ { id: 1, name: "answerTypeLabel", type:'scenario', children:[{_reference: 2}]},
{ id: 2, name: "acceptRequestLabel", type:'paragraph', data: "acceptRequestLabel"},
{ id: 3, name: "rejectRequestLabel", type:'scenario', children:[{_reference: 5},{_reference: 6}]},
{ id: 4, name: "MoreInformationLabel", type:'scenario', children:[{_reference: 7},{_reference: 8}]},
{ id: 5, name: "rejectRequestStatusLabel", type:'paragraph', data: "rejectRequestStatusLabel"},
{ id: 6, name: "rejectRequestNotCoveredLabel", type:'paragraph', data: "rejectRequestNotCoveredLabel" },
{ id: 7, name: "MoreInformationDocumentLabel", type:'paragraph', data: "MoreInformationDocumentLabel"},
{ id: 8, name: "MoreInformationDataLabel", type:'paragraph', data: "MoreInformationDataLabel"}
];
// Building the store object
var sortableStore = new dojo.data.ItemFileWriteStore({
data: {
identifier: 'id',
label: 'name',
items: data
},
});
// building the model
var model = new dijit.tree.ForestStoreModel({
store: sortableStore,
query: {
id: "*"
},
rootId: "root",
rootLabel: "sorting of tree"
});
// Building the tree
var tree = new dijit.Tree({
model:model,
'class': "tundra"
},
"resourceTree");
});
.
Here Id 2 in a child of Id 1 , so while displaying Id 2 must be inside Id 1.
But here Id 2 appears inside id 1 and also on the same level of id 1.(There is a duplication of all the all the child ids ).
This is case with id 2,5,6,7,8.
I want to remove the duplication.
Ouptput should be like

Reason is that you apply a non-hierachial store onto a tree which is not supposed to display items that has parents as a sibling to the root.
To 'fix' this, the referenced id's needs to not get matched by the model query.
In your case of data, it looks like the type:'paragraph' is supposed to be leaves. Therefore set the query to match type:'scenario' as opposed to your current ' id: "*" '
var model = new dijit.tree.ForestStoreModel({
store: sortableStore,
query: {
type:'scenario'
},
rootId: "root",
rootLabel: "sorting of tree"
});

items not within the <ul></ul>

I create a menu with a javascript object and jquery. I have certain items that needs to be in the <ul></ul> but instead they're beneath it.
http://jsfiddle.net/MWBt6/
I have 'Index' for example. In there I want to append a list of items.
I know the category id is 0 and the item id is 2, i stored those things in the data attribute.
Now how can I append a ul to that one?

That's not how append works. You need to create the elements on their own. Here:
var loadPath = "resources/books/book1/";
var menu = {
data: [{
name: "the book",
id: 0,
items: [{
name: "Introduction",
id: 0,
target: "inleiding.html"
}, {
name: "Content",
id: 1
}, {
name: "Index",
id: 2
}]
}, {
name: "my stuff",
id: 1,
items: [{
name: "Notes",
id: 0
}, {
name: "Marks",
id: 1
}]
}, {
name: "other",
id: 2,
items: [{
name: "Search",
id: 0
}, {
name: "Continue Reading",
id: 1
}]
}]
}
$(document).ready(function() {
var $menu = $('#menu');
for(var i = 0; i < menu.data.length; i++) {
var categorie = menu.data[i];
var categorieName = categorie.name;
var categorieId = categorie.id;
var items = categorie.items;
console.log("categorieName: " + categorieName);
var list = $('<ul>');
for(var j = 0; j < items.length; j++) {
var itemId = items[j].id;
list.append($('<li>').attr('data-itemId', itemId).text(items[j].name));
}
$menu.append(
$('<li>').attr('data-categorieId', categorieId).append(categorieName, list)
);
}
});​
Here's the updated jsFiddle.

You are trying to append as if the DOM is a text editor. You can't append the beginning of an element with it's opening tag, then later close that element with an append of a closing tag. Only full valid elements can be inserted into the DOM.
Instead, build an html string, then only make one append after the string is completed. This method is far more efficient than doing multiple appends also
Working demo: http://jsfiddle.net/MWBt6/3/