Click on button I got two folderid, now I want to send only first folderid in service how it is possible ?
See below screenshot click on folder-1(folderid is 1230) it opens and shows four folders inside folder-1 using folderid. Now I click on folder-1-1(folderid is 1231), but it takes two folderids 1231 and 1230 both see in console any possibility to get only one folderid or else any other possibility to send only first folderid to server side ?
HTML
<div *ngFor="let folder of folderObjs" (click)="getFolderName(folder.folderid)">{{folder.folderName}}
<div *ngFor="let pattern of patternObj" (click)="getFolderName(pattern.folderid)">
{{pattern.folderName}}
</div>
</div>
TS
getFolderName(folderid){
console.log(folderid); // 1231
1230
this.userService.getFolderName({'folderid': folderid}).subscribe(
(data) => {
console.log(data.payload);
}
)
}
The problem is that the inner click bubbles out to the parent - this should fix the problem:
<div *ngFor="let folder of folderObjs" (click)="getFolderName($event, folder.folderid)">{{folder.folderName}}
<div *ngFor="let pattern of patternObj" (click)="getFolderName($event, pattern.folderid)">
{{pattern.folderName}}
</div>
</div>
and
getFolderName(e, folderid){
e.cancelBubble = true;
this.userService.getFolderName({'folderid': folderid}).subscribe(
(data) => {
console.log(data.payload);
}
)
}
Not sure if I'm following what's wrong but...
I think when you click on folder-1-1, it also clicks on folder-1 since that's it's parent.
Try this:
<div *ngFor="let folder of folderObjs">
<span (click)="getFolderName(folder.folderid)">{{folder.folderName}}</span>
<div *ngFor="let pattern of patternObj" (click)="getFolderName(pattern.folderid)">
{{pattern.folderName}}
</div>
</div>
Related
Ok, this seems to be a easy question but I'm not able to get it.
I have index.php and find.php in my project.
In index.php, I'm showing results of list-group items as follows
<div id="showDetails">
</div>
<div id="showList">
//All my list-group items are listed here
</div>
My Ajax returning the list-group as follows
function funcReadRecord() {
var readrecord1 = "readrecord1";
var sometext = $('#SNOW_INC').val();
$.ajax({
url : "find.php",
type : 'post' ,
data : { readrecord1 : readrecord1,
sometext : sometext } ,
success : function(data, status){
$('#showList').html(data);
}
});
}
Now, I'm returning the values as a HTML link so it looks like this
<div id="showList">
data 1
data 2
data 3
</div>
What I want is when I click data 1 link, I want to show showDetails div with data 1 populated. Then when I click data 2 link, it changes to data 2 in showDetails.
How do I do that?
Probably the information I've provided is not enough but feel free to ask and I'll provide more.
The simplest solution would be to add a click handler to each item that calls a function, passing in the id of the item you want to display.
Within that function, fetch the data for the given item and show it.
function showData(which) {
console.log(`fetch data ${which} here and show it in the data div.`);
document.getElementById('showData').innerHTML = `show data ${which}`
return false; // prevents navigation on the clicked link
}
<div id="showList">
<a onclick="showData(1)" href="#">data 1</a>
<a onclick="showData(2)" href="#">data 2</a>
<a onclick="showData(3)" href="#">data 3</a>
</div>
<div id="showData"></div>
I am making angular application with angular form.
Here i have given a form with input fields first name and last name which will always showing..
After that i am having children which will be displayed upon clicking the add button and the children will get removed on click remove button.
As of now everything works fine.
Here i am making patching of data to the inputs on click option from select box.. The neccessary inputs gets patched..
HTML:
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</div>
<select multiple (change)="changeEvent($event)">
<option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<div class="form-row">
<!-- <button type="submit" [disabled]="!form.valid">Save</button> -->
</div>
</form> <br>
<!-- Need to have add and remove button.. <br><br> -->
<button (click)="addControls('myArray')"> Add </button>
<button (click)="removeControls('myArray')"> Remove </button><br/><br/>
<pre>
{{form?.value|json}}
</pre>
</div>
TS:
changeEvent(e) {
if (e.target.value == 1) {
let personOneChild = [
{ property_name : "Property one" },
{ property_name : "Property two" },
]
for (let i = 0; i < personOneChild.length; i++) {
this.addControls('myArray')
}
this.form.patchValue({
'myArray': personOneChild
});
}
if (e.target.value == 2) {
let personTwoChild = [
{ property_name : "Property three" },
{ property_name : "Property four" },
{ property_name : "Property five" },
]
for (let i = 0; i < personTwoChild.length; i++) {
this.addControls('myArray')
}
this.form.patchValue({
'myArray': personTwoChild
});
}
}
addControls(control: string) {
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
}
removeControls(control: string) {
let array = this.form.get(control) as FormArray;
array.removeAt(array.length - 1);
}
Clear working stackblitz: https://stackblitz.com/edit/angular-x4a5b6-fnclvf
You can work around in the above link that if you select the person one option then the value named property one and property two gets binded to the inputs and in select box the property one is highlighted as selected..
The thing i am in need is actually from here,
I am having a remove button, you can see in demo.. If i click the remove button, one at last will be got removed and again click the last gets removed..
Here i am having two property one and two, if i remove both the inputs with remove button, the the highlighted value person one in select box needs to get not highlighted.
This is actually my requirement.. If i remove either one property then it should be still in highlighted state.. Whereas completely removing the both properties it should not be highlighted..
Hope you got my point of explanation.. If any needed i am ready to provide.
Note: I use ng-select for it as i am unable implement that library, i am making it with html 5 select box.. In ng-select library it will be like adding and removing the option.. Any solution with ng-select library also appreciable..
Kindly help me to achieve the result please..
Real time i am having in application like this:
Selected three templates and each has one property with one,two,three respectively:
If choose a dropdown then the property values for the respective will get added as children.
Here you can see i have deleted the property name three for which the parent is template three and the template three still shows in select box even though i removed its children
Firstly, get a reference to the select, like so:
HTML:
<select multiple (change)="changeEvent($event)" #mySelect>
<option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>
TS:
import { ViewChild } from '#angular/core';
// ...
#ViewChild('mySelect') select;
Then, in your remove function, check if all elements have been removed, and if they have, set the value of the select to null
if (array.length === 0) {
this.select.nativeElement.value = null;
}
Here is a fork of the StackBlitz
I'm using the ngx-pipes in my ionic 3 app because I am pulling an object of objects from firebase.
I retrieve my objects and turn it into a variable that I can use on the page:
getEvents() {
this.firebaseDatabase.getEvents.subscribe(data => {
console.log("Events ", data);
this.events = data;
}, error => {
console.log("Events ", error);
});
}
I log the data and it comes back like this:
eventIDHashed_1:
endDateTime:"tomorrow"
location:"somewhere"
roles:
GyyapYhHQDOriruHLvGPKaTOiRp2:"admin"
startDateTime:"today"
title:"Arisss & Nathan"
type:"wedding"
eventIDHashed_2:
endDateTime:"tomorrow"
location:"somewhere"
roles:
GyyapYhHQDOriruHLvGPKaTOiRp2:"admin"
startDateTime:"today"
title:"Jack & Marlana"
type:"wedding"
The way I'm displaying it on the page is a temporary solution, but everything is working fine except the first line. I need to get the event name (the key) where it says eventIDHashed_1 and eventIDHashed_2
<div class="event-container">
<div *ngFor="let event of events | values; let i = index">
<span>{{events[i]}}</span>
<span>{{event.title}}</span>
<span>{{event.location}}</span>
<span>{{event.type}}</span>
<span *ngFor="let role of event.roles | pairs">
<span>{{role[0]}}, {{role[1]}}</span>
</span>
<span>{{event.startDateTime}}</span>
<span>{{event.endDateTime}}</span>
</div>
</div>
I have everything working and am able to retrieve all information, except the actual event ID <span>{{events[i] | keys}}</span> This gives me a list of all of the keys inside of it (endDateTime, location, title, startDateTime...), but I need to get the id of the event eventIDHashed_1 and eventIDHashed_2
After playing with ngx-pipes, I found that I could use the pairs operator fairly simply. I've changed the template from the above to this:
<div *ngFor="let event of events | pairs">
<span>{{event[0]}}</span>
<span>{{event[1].title}}</span>
<span>{{event[1].location}}</span>
<span>{{event[1].type}}</span>
<span *ngFor="let role of event[1].roles | pairs">
<span>{{role[0]}}, {{role[1]}}</span>
</span>
<span>{{event[1].startDateTime}}</span>
<span>{{event[1].endDateTime}}</span>
</div>
ngx-pairs gives me the key (position [0]) and the value (position [1]) of the event
I have an array of sections where a section is pushed into the array when the user clicks a checkbox. It is defined like this:
$scope.print = {
sections:[]
};
Once I have all of the selected Sections, I use a service to get a list of questions for each selected section like this:
var questions = [];
myService.getQuestions(id)
.success(function (data) {
questions = data;
});
Then I assign the returned questions to the original array like this:
angular.forEach($scope.print.sections,
function (value, key) {
if (value.QuestionSectionID === id) {
$scope.print.sections[key].questions = questions;
}
});
The assignment "seems" to work, but I am unable to access the particular fields in the questions array by their field names.
On my HTML page, I have this:
<div ng-repeat="ps in print.sections">
<div>
<h4>{{ps.vchSectionName}}</h4>
</div>
<div ng-repeat="section in ps.questions">
<div ng-repeat="q in section">
{{q.vchQuestionText}}
</div>
</div>
</div>
When I try to access the "q.vchQuestionText" field, my HTML is blank, however if I simple do the following:
<div ng-repeat="q in section">
{{q}}
</div>
I can then see ALL of the information contained in each field of "q". But I need to access each field in "q" by it's name. What am I missing here?
Any assistance is greatly appreciated!
Okay, the reason I could display all the data in "q", but could not specify a field is because I had one too many ng-repeat directives.
All I needed was the following:
<div ng-repeat="ps in print.sections">
<div>
<h4>{{ps.vchSectionName}}</h4>
</div>
<div ng-repeat="q in ps.questions">
{{q.vchQuestionText}}
</div>
</div>
Hopefully, this will help someone else. Thank you all for your help.
I am trying to remove a single document from the collection in over server side with Meteor.methods by passing _id of object ,but it is not removing object , also tried other fields in that document but no go.
I have also tried FoodCategory.remove(removeID) ; that is also not working.
File 1 - displayCategorySection.html
<template name="categoryDisplaySection">
<div class="row categoryDisplay">
<div class="col-md-10 col-lg-10 ">
{{Category}}
</div>
<div class="col-md-2 col-lg-2 pull-right">
<i class="fa fa-minus-square"></i>
</div>
</div>
<div class="row ">
<div class="col-md-12 col-lg-12 identity">
{{_id}}
</div>
</div>
</template>
In the .JS file I am passing this _id to Meteor method deleteFoodCategory
File 2 - categoryDisplaySection.js
Template.categoryDisplaySection.events({
'click .fa-minus-square':function(evt,tmpl)
{
var remove_id = tmpl.$(".identity").text();
alert(remove_id);
/*****Server side call for document remove *****/
Meteor.call("deleteFoodCategory",remove_id,
function(error,result)
{ alert(result); });
}
});
Server Side File 3 - FoodCategorySection.js contain deleteFoodCategory method
Meteor.methods({
deleteFoodCategory: function(removeID)
{
return FoodCategory.remove({
'_id' : removeID
},
function(error,id)
{
if(id) { return id;} else { return error; }
});
}
});
Code is working correctly if I put _id like "RAEnLfomeqctuonnE" in place of variable removeID. I tried various options like '_id' or just _id without quotes , unable to figure out problem.Please take a look
Fetching the document _id from a div text is overkill, you could use the current data context instead :
Template.categoryDisplaySection.events({
"click .fa-minus-square": function(evt,tmpl){
var removeId = this._id;
alert(removeId);
Meteor.call("deleteFoodCategory", removeId);
});
In your Meteor method, you can simply pass the _id to Collection.remove :
Meteor.methods({
deleteFoodCategory: function(removeId){
return FoodCategory.remove(removeId);
}
});
Answer provided by saimeunt is also working correctly as far as original problem is concern , there is need to use .trim function with remove_id variable
File 2 - categoryDisplaySection.js
Template.categoryDisplaySection.events({
"click .fa-minus-square": function(evt,tmpl){
var remove_id = tmpl.$(".identity").text();
/**This line needed to be added**/
removeId = remove_id.trim();
alert(removeId);
/*****Server side call for data insert *****/
Meteor.call("deleteFoodCategory",removeId);
})
but as #saimeunt has said fetching the document _id from a div text is overkill,so using this_id from now on