I'm currently working on a Vue 2 app which has a sidebar menu, I'm using a v-list-group to display menu items which you can filter using a search field.
I'm trying to expand the filtered menu items to show the search results but I don't know how to set the v-list-group items to expand after I make a search.
Is there a way to set the items to their "open" or "active" state through a method?
Use the v-model directive to bind the active value for a group.
The value should correspond to a zero-based index.
First group is 0, second group is 1 and third group is 2.
The example below is a bit overkill but should demonstrate the point.
Template:
<v-list-group :key="category.title" no-action v-model="category.active">
// ...
</v-list-group>
Data:
data: () => ({
categories: [
{
title: 'Category 1',
active: false,
items: [
{
title: 'Sub Category 1',
subactive: false,
}
]
},
{
title: 'Category 2',
active: false,
items: [
{
title: 'Sub Category 2',
subactive: false,
}
]
},
{
title: 'Category 3',
active: false,
items: [
{
title: 'Sub Category 3',
subactive: false,
}
]
}
],
}),
Docs: https://vuejs.org/api/built-in-directives.html#v-model
Example: https://codepen.io/alexpetergill/pen/BaPOJYp/dcca9f48d8d3daf072688954e50ea17f
Related
I'm trying to populate a PrimeReact Tree with data from sqlite3 database, but it doesnt work.
Here is my SQL-Query:
select 'prj:'||p.id as key,p.name as label,(
select json_group_array(json_object('key',key,'label',label))
from(
select 'tpr:'||tpr.id as key,tpr.name as label from tpr
where tpr.prjid=p.id
and tpr.active="true"
order by tpr.id
)
) as children
from prj p,usr_right r
where p.id=r.prjid
and p.active="true"
and r.usrid=$1
order by p.id
I get following JSON-Code:
[
{
key: 'prj:1',
label: 'Projekt 1',
children: '[{"key":"tpr:1","label":"Teilprojekt 1"},{"key":"tpr:2","label":"Teilprojekt 2"}]'
},
{ key: 'prj:2', label: 'Projekt 3', children: '[]' },
{ key: 'prj:3', label: 'Projekt 2', children: '[]' }
]
This is OK but i figured out, that the children are not rendered, because there are quotes around the square brackets at the children path - how can i fix this?
If initial is your json to be mapped to Tree, then you need to make a slight modification to convert string to array
let initial = [
{
key: 'prj:1',
label: 'Projekt 1',
children: '[{"key":"tpr:1","label":"Teilprojekt 1"},{"key":"tpr:2","label":"Teilprojekt 2"}]'
},
{ key: 'prj:2', label: 'Projekt 3', children: '[]' },
{ key: 'prj:3', label: 'Projekt 2', children: '[]' }
]
let converted = initial.map(obj => ({ ...obj, children: JSON.parse(obj.children)}))
console.log(converted)
I'm trying to implement a basic multiselect dropdown to my project. My code is the following:
HTML
<ng-multiselect-dropdown [settings]="searchSettings" [data]="dummyList" multiple>
</ng-multiselect-dropdown>
TS
dummyList = [
{ item_id: 1, item_text: 'Mumbai' },
{ item_id: 2, item_text: 'Bangaluru' },
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' },
{ item_id: 5, item_text: 'New Delhi' }
]
searchSettings: TslMultiSelectSettings = {
enableSearchFilter: true,
noDataLabel: 'Search For status',
labelKey: 'status',
primaryKey: 'status'
}
This successfully creates the dropdown with the correct amount of items. But it is showing up blank and I can't figure out why. See image:
When I inspect the element in devtools I can see that the names are the options are there too:
What am I doing that is making the text not appear and how can I fix?
Check the docs, the format is: { id: number|string, text: string }.
Update
I'm not even sure if you're using the same library as the one I linked. But if you are, you can use it like this:
dummyList = [
{ id: 1, text: 'Mumbai' },
{ id: 2, text: 'Bangaluru' },
{ id: 3, text: 'Pune' },
{ id: 4, text: 'Navsari' },
{ id: 5, text: 'New Delhi' }
]
<ng-multiselect-dropdown [data]="dummyList"></ng-multiselect-dropdown>
I have no idea where you are getting the following interface from, it doesn't match the library I'm referring to at the start of the answer, please confirm which npm library you are using.
searchSettings: TslMultiSelectSettings = {
enableSearchFilter: true,
noDataLabel: 'Search For status',
labelKey: 'status',
primaryKey: 'status'
}
I want to delete the 1 ids of cardItems of my list with 0 ids and keep the order of the lists. what is the best way?
lists: [
{
id: '0',
title: 'LIST 1',
cardItems: [
{
id: '0',
text: 'Card 1',
},
{
id: '1',
text: 'Card 2',
},
{
id: '2',
text: 'Card 3',
},
],
},
]
You can use .find to get the list item by id, and then remove the card item using .filter:
const lists = [
{
id: '0',
title: 'LIST 1',
cardItems: [
{ id: '0', text: 'Card 1' },
{ id: '1', text: 'Card 2' },
{ id: '2', text: 'Card 3' },
],
},
];
const removeCardItem = (list, listItemId, cardItemId) => {
const arr = [...list];
// get list item by id
const item = arr.find(listItem => listItem.id === listItemId);
// remove card item by id if found
if(item)
item.cardItems = item.cardItems.filter(cardItem =>
cardItem.id !== cardItemId
);
return arr;
}
console.log( removeCardItem(lists, '0', '1') );
Something similar to
if(lists[0].cardItems[0].id === 1){
lists[0].cardItems.splice(0,1);
}
Obviously this will only check that one value, but this can easily be implemented into a loop or nested loops or whatever you need. (I can't know since I can't see all of your code)
Your question is a little bit hard to understand, but this was my best guess at helping you out! If this wasn't the answer you're looking for then please give us more information so we can help you more effectively!
So I have little dilemma here. I have a nested json object that is inside ng-repeat and is sortable using AngularJS UI Sortable (based on JQuery UI Sortable):
$scope.rootItem = {
id: '1',
type: 'course',
title: 'Adobe Photoshop CC for beginners',
items: [{
id: '2',
type: 'label',
title:'label',
items:[{
id: '3',
type: 'module',
title:'Module title',
items: [{
id: '4',
type: 'topic',
title:'Topic title',
items: [{
id: '5',
type: 'content',
title:'Content title'
}, {
id: '6',
type: 'content',
title:'Content title'
}]
}]
},{
id: '7',
type: 'resources',
title:'Resources'
},{
id: '8',
type: 'module',
title:'Module title',
items: [{
id: '9',
type: 'topic',
title:'Topic',
items: [{
id: '10',
type: 'question',
title:'Question title'
}]
}, {
id: '11',
type: 'topic',
title:'Topic title',
items: [{
id: '12',
type: 'content',
title:'Content title'
}]
}]
}]
},{
id: '14',
type: 'assessmentLabel',
title: 'Assessment Label',
items: [{
id: '15',
type: 'assessment',
title: 'Assessment Title',
items: [{
id: '16',
type: 'courseAssessment',
title: 'Course Question Group',
items: []
}]
}]
}]
};
What I should be able to do is remove any of the items within this object, and if it has any children they need to be remove too.
So what I would generally think is passing either $index and use splice to remove it (if it was an array).
But for objects doesnt seem to work this way, I read online that delete should be used instead...
On my button I try to pass the object itself as in:
data-ng-click="removeItem(ngModelItem)"
and in my controller do something like this:
// Remove Item from the list
$scope.removeItem = function(item) {
};
Any suggestions?
Use ngModelItem
<li ng-repeat="innerItem in ngModelItem.items">
Delete me
in your controller,
$scope.deleteItem = function(collection, index){
collection.splice(index,1);
};
Demo
For removing json elements from a json object you use the delete operator. But in your case, I assume you want to remove a json object from a json array, so you should really use splice() instead.
You should receive both the list and the index in your removeItem() function so you can remove the indexed element and angularjs will update your view.
I'm currently working with two data models, where Foo has a "toMany" property of type Bars. I'm now trying to create two select boxes where when the first populated with Foo's is picked, it refines the second listing only the Bars associated with that foo.
JSFiddle Here: http://jsfiddle.net/drew/6jLCy/
Code below, but it certainly doesn't work. It does go as far as setting the SelectBox values for the first, but doesn't populate the second with the corresponding bar value titles.
App = Em.Application.create();
App.store = DS.Store.create({
revision: 7,
adapter: DS.fixtureAdapter
});
/**************************
* Models
**************************/
App.Foo = DS.Model.extend({
bars: DS.hasMany('App.Bar'),
title: DS.attr('string')
});
App.Bar = DS.Model.extend({
foos: DS.hasMany('App.Foo'),
title: DS.attr('string')
});
/**************************
* Fixtures
**************************/
App.Foo.FIXTURES = [
{
id: 0,
title: 'Footitle 1',
bars: [0,1]
},
{
id: 1,
title: 'Footitle 2',
bars: [0,1,2]
}
];
App.Bar.FIXTURES = [
{
id: 0,
title: 'Bartitle 1',
},{
id: 1,
title: 'Bartitle 2'
},{
id: 2,
title: 'Bartitle 3'
}
];
/**************************
* Views
**************************/
App.SetFooField = Em.Select.extend({
contentBinding: 'App.fooController',
valueBinding: 'content.selected',
optionLabelPath: 'content.title'
});
App.SetBarField = Em.Select.extend({
contentBinding: 'App.barController',
valueBinding: 'content.selected',
optionLabelPath: 'content.title'
});
/**************************
* Controllers
**************************/
App.fooController = Em.ArrayController.create({
content: App.store.findAll(App.Foo)
});
App.barController = Em.ArrayController.create({
contentBinding: 'App.fooController.selected.bars'
});
Markup for the html:
<script type="text/x-handlebars">
{{view App.SetFooField}}
{{view App.SetBarField}}
</script>
holy cow. after many days of going nearly nuts, it turns out this is entirely a bug in the latest ember-data. in fixtures, all ids need to be strings. just. plain. nuts.
/**************************
* Fixtures
**************************/
App.Foo.FIXTURES = [
{
id: '0',
title: 'Footitle 1',
bars: ['0','1']
},
{
id: '1',
title: 'Footitle 2',
bars: ['0','1','2']
}
];
App.Bar.FIXTURES = [
{
id: '0',
title: 'Bartitle 1',
},{
id: '1',
title: 'Bartitle 2'
},{
id: '2',
title: 'Bartitle 3'
}
];
failed to get embedded's object property using ember.js with ember-data
huge thanks to #dgeb for answering that question.
jsfiddle updated accordingly.
http://jsfiddle.net/drew/6jLCy/