I am trying to build a multiselect list using angular js. I am getting a weird TypeError: a.foreach is not a function and I can’t seem to figure out when.
js :
var myAppModule = angular.module('multiselect', []);
myAppModule.controller("view", function ($scope) {
$scope.listA = {
values: [{
id: 1,
label: 'aLabel',
subItem: {
name: 'aSubItem'
}
}, {
id: 2,
label: 'bLabel',
subItem: {
name: 'bSubItem'
}
}],
selected: {
name: 'aSubItem'
}
};
})
html:
<select multiple ng-options="item.subItem as item.label for item in listA.values track by item.id" ng-model="listA.selected"></select>
I don’t know what I could be doing wrong. Am I casting something wrong ?
The problem is that since you have added the multiple attribute, the value of the select should be an array. So try something similar to this:
$scope.listA = {
values: [{
id: 1,
label: 'aLabel',
subItem: {
name: 'aSubItem'
}
}, {
id: 2,
label: 'bLabel',
subItem: {
name: 'bSubItem'
}
}],
selected: [{
name: 'aSubItem'
}]
};
You need not to track your values by id. it will do it by default.
<div ng-controller="Main">
<select multiple ng-options="item.subItem as item.label for item in listA.values" ng-model="listA.selected"></select>
</div>
JS Fiddle for your code (Fix):
http://jsfiddle.net/juag4okg/
I was having the same problem. It worked well by creating the static json object as answered above, but did not worked out when i tried to fetched the object or list from the server.
Then i realized my server was not sending the json object and i hadn't convert it to json as well. And when i converted it to json it worked perfectly fine.
So if you are having similar problem to display the select options (muliple or single) from the server side data this process might help you.
here is the link to angular angular.toJson() function.
Related
Can anyone tell me, how to create a tree view inside the drop down. The drop down values will be getting from rest api call as json as follows. And subchild may contains one more level of child as well.
I have to do auto suggestion here to perform the filter from parent as well as the child level too.
VehicleList = [
{
parent: "audi",
child: [{
type: 'G-audiA',
subchild: [{
id: 1,
name: 'type audi A1'
}, {
id: 2,
name: 'type audi A2'
}]
}, {
type: 'G-audiB',
subchild: [{
id: 1,
name: 'type audi B1'
}, {
id: 2,
name: 'type audi B2'
}]
}]
}, {
parent: "bmw",
child: [{
type: 'G-bmwA',
subchild: [{
id: 1,
name: 'type bmw A1'
}, {
id: 2,
name: 'type bmw A2'
}]
}, {
type: 'G-bmwB',
subchild: [{
id: 1,
name: 'type bmw B1'
}, {
id: 2,
name: 'type bmw B2'
}]
}]
}]
Anyone help will be appreciated!!!
Based on the first example from the Angular Material Tree docs I managed to build up a drop-down with a tree structure inside like so:
The trick for displaying the tree is to add a disabled/empty option. I used it as a label. The tree is taken from their examples so I did not modify it at all, you can modify the node structure to match your own.
In order to display the selected items in the label of the drop-down, you can create a method that will return the selected items a string as their SelectionModel object has the selected property which would return all selected nodes.
/** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(
true /* multiple */
);
And in order to get the selected items from the tree:
return this.checklistSelection.selected.map(s => s.item).join(",");
For the filtering part I think you can look over this answer.
Hope this is helpful!
Stackblitz
Edit: If you select a child the parent gets selected too and added in the SelectionModel even if all its children are not selected. If you don't want this behaviour comment on the function descendantsPartiallySelected. This will not check the checkbox and so parents will not be added in SelectionModel unless all children are selected
Hola Developers im trying to create a product in my shopping card , but still im stacked in one issue :
Can't find the proper way to design a object just on the same way i receive it from my json (back-end).
Lets say the part is causing the issue is this:
JSON RECEIVED
"product_category": [
{
"categories_of_product": "Good"
},
{
"categories_of_product": "Danger"
},
{
"categories_of_product": "Homer"
}
],
"people_buying_this_product": "Jack Ripper"
},
]
then on my building-product-processs , on the data return is a section that have to do with this, where in then using checkboxes i get which checkbox is checked or not , in order to build a array of categories similar to the former one i have shown:
DATA RETURN
ProductAdded: {
description: "",
upload_image3: "",
upload_image2: "",
upload_image1: "",
unities: 0,
price: 0,
name: "",
Categories: [
{ id: 1, value: "Miscellaneous", selected: false },
{ id: 2, value: "Homer", selected: false },
{ id: 3, value: "Electronic", selected: false },
{ id: 4, value: "Internet", selected: true },
{ id: 5, value: "Kids", selected: false },
{ id: 6, value: "Donas", selected: true },
{ id: 7, value: "Sports", selected: true },
{ id: 8, value: "Horror", selected: false }
],
METHOD that dispatches de action in vuex
addProductOnSale(thisCurrent) {
this.$store.dispatch("addProductSale", this.ProductAdded);
}
then being already in the VUEX state management , on the action in fact , trying to build the new product for this product category, i set this:
addProductSale({commit,getters},currentProduct){
product_category: currentProduct.Categories.filter(option =>
option.selected).map(option => {categories_of_product: option.value})
}
------------------->this one gives me undefined like:
"product_category":
[
undefined
],
"product_category":
[
undefined
],
"product_category":
[
undefined
],
]
or tried this other :
addProductSale({commit,getters},currentProduct){
product_category:currentProduct.Categories.forEach( option.selected,() =>
option.value).map(option => option.selected),...
}
and gave me error , not even showing a result.
Basically cant find the way to design the same structure im receiving for json , nor even reaching to values.
Is weird ,but if i only set the query like this:
addProductSale({commit,getters},currentProduct){
product_category:currentProduct.Categories.filter(option => option.selected)
}
Indeed filters and gives back the objects inside Categories which commit the condition of selected true , but with its plain format just as the data returns , but that's not the idea.
Any advice or help?
Thanks in advance!!!!
I am working with knockout js. Now i am using template option and local json data as datasource.In this i am unable to bind the data to node within template.
Please get my html code below:
<div data-bind="template:{name:'treeTemplate',data:{da:Data}}"></div>
<script id="treeTemplate" type="text/html">
<b data-bind="text:$data.text"></b>
Please get my script section below
var treeData = [
{ id: 1, text: "UK"},
{ id: 2, text: "Steven John" },
{ id: 3, text: "USA" },
{ id: 5, text: "Andrew" },
{ id: 4, text: "Angelica" }
];
window.viewModel = {
value: ko.observable(new Date(2015, 06, 15)),
Data: ko.observableArray(treeData)
};
$(function () {
// declaration
ko.applyBindings(viewModel);
});
I have updated the sample in jsfiddle also. Please get the below link:
https://jsfiddle.net/38vnznht/
Can you please anyone suggest on this.Thanks for any help.
your first problem is the use of data in the template object.
data:{da:Data}
for iterating through a array you need to use foreach
foreach:data
so because of this you need to update your bindings
// from this
<b data-bind="text:$data.text"></b>
// to this
<b data-bind="text: text"></b>
here is a working example :
https://jsfiddle.net/wqe3s1vs/3/
Also, documentation on using "foreach" with a named template :
http://knockoutjs.com/documentation/template-binding.html#note-2-using-the-foreach-option-with-a-named-template
I'm currently implementing my own commenting system. Unfortunately Disqus or any other comment platform doesn't meet my requirements.
I use NodeJS and MongoDB as backend. I need to run basically two queries on my database:
Get all comments by a topic/slug
Get all comments by a user
One can comment to an topic or reply to a comment.
Hey, cool post # top lvl comment
Thanks! # reply to comment
Foo Bar! # reply to reply
and so on...
So my database schema looks like
{
id: ObjectId,
text: string,
author: { id: ObjectId, name: string },
parent: nullable ObjectId,
slug: string/number/whatever
}
If parent is null it's a top level comment, otherwise it's a reply.
Pretty easy so far, right? The problem I do have now is displaying comments below posts. When there would be only top level comments it would be easy. Just get all comments for one specific slug, sort them by date/rating/... and compile them with my HTML View Engine.
But there are in fact replies and I'm just stuck at the point where I need to organize my structure. I want to nest replies into comments within my list
Original list (simplified)
[
{ id: 1, text: 'foo', parent: null },
{ id: 2, text: 'bar', parent: 1 },
// ...
]
Expected Output
[
{ id: 1, text: 'foo', replies: [
{ id: 2, text: 'bar' },
] },
]
I've tried creating my expected output with a recursive function which got very weird tho. Unless that it wouldn't be very efficient. So since I'm really getting frustrated and kinda feeling stupid not solving this problem I've decided to ask for your help SO.
The actual problem I want to solve: How do I render my comments, that they are properly nested etc.
The question I'm going to ask: How do I organize my flat structure in an efficient way to solve the above described problem?
Here's one approach with linear complexity:
var comments = [{
id: 3,
text: 'second',
parent: 1
}, {
id: 1,
text: 'root',
parent: null
}, {
id: 2,
text: 'first',
parent: 1
}, {
id: 5,
text: 'another first',
parent: 4
}, {
id: 4,
text: 'another root',
parent: null
}];
var nodes = {};
//insert artificial root node
nodes[-1] = {
text: 'Fake root',
replies: []
};
//index nodes by their id
comments.forEach(function(item) {
if (item.parent == null) {
item.parent = -1;
}
nodes[item.id] = item;
item.replies = [];
});
//put items into parent replies
comments.forEach(function(item) {
var parent = nodes[item.parent];
parent.replies.push(item);
});
//root node replies are top level comments
console.log(nodes[-1].replies);
I have following arrays with values (i am generating the values on go)
$scope.objectName = [{ Name: '' }];
$scope.propertiesElement = [{ Key: '', Value: '' }];
I want to concatenate these two objects to get the following result
[{Name:''},{ Key: '', Value: '' }]
Plunker link , somehow that's not working either
when I click on the add row button it will add another row for key and value text boxes only not for name, I can add n no of rows and when I click on Submit it should show the kev value pair as
[{Name:''},{ Key: '', Value: '' },{ Key: '', Value: '' },{ Key: '', Value: '' }.....so on]
Thanks
Not sure why you want to build an array of mismatched objects. That seems to me to be asking for trouble. I would suggest possibly doing the following:
$scope.objects = [{Name: '', Elements: []}];
Then you can easily manage multiple objects who have elements:
(I use underscore http://underscorejs.org/)
$scope.addElementToObject = function(objName, element){
_.where($scope.mergedArray, {Name: objName}).Elements.push(element);
};
Then you can add to the list of elements for that object without having to eval the object in the elements array on each use.
If you still want/need to merge arrays of mismatched objects, it would be the following:
$scope.objectName = [{ Name: '' }];
$scope.propertiesElement = [{ Key: '', Value: '' }];
$scope.mergedArray = $scope.objectName.contact($scope.propertiesElement);
$scope.addElement = function(element){
$scope.mergedArray.push(element);
};
Then, in your click event code:
$scope.addElement({ Key: 'someKey', Value: 'Some Value' });
I hope this helps.