AngularJs how to insert one div in another? - javascript

I have dynamically created a "reply comment box" (it's a directive now <reply-comment></reply-comment>)
<div class="comment-reply-wrap" ng-repeat="repUser in repUsers">
<div class="comment">
<div class="info" >
<div class="left-side-info">
<img src="img/avatar.png" alt="avatar" class="avatar">
<span class="name">{{repUser.name}}</span>
</div>
<div class="right-side-info">
<p class="user-text" ng-bind-html='repUser.text'>
<img class="comment-image" src="">
</p>
</div>
<div class="bottom">
<span class="comment-email">{{repUser.email}}</span>
<span class="comment-date">10/29/2010 at 6:40AM</span>
<button type="submit" class="reply" ng-click="createReplyForm($event)">
<i class="fa fa-reply" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
Here is top-level 'comment box'
<div class="comment-wrap" ng-repeat="mainComment in mainUsers">
<div class="comment">
<div class="info" >
<div class="left-side-info">
<img src="img/avatar.png" alt="avatar" class="avatar">
<span class="name">{{mainComment.name}}</span>
</div>
<div class="right-side-info">
<p class="user-text" ng-bind-html='mainComment.text'>
<img class="comment-image" src="">
</p>
</div>
<div class="bottom">
<span class="comment-email">{{mainComment.email}}</span>
<span class="comment-date">10/29/2010 at 6:40AM</span>
<button type="submit" class="reply" ng-click="createReplyForm($event)"><i class="fa fa-reply" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="cover" ng-repeat="reply in mainComment">
<reply-comment></reply-comment>
</div>
</div>
Controller
var app = angular.module('commentsApp', ['ngSanitize']);
app.controller('UserController', function($scope){
$scope.mainUsers = [];
$scope.repUsers = [];
$scope.bool = false;
$scope.addUser = function() {
//Dynamically create array of objects and push data
$scope.mainUsers.push({
name: $scope.user.name,
email: $scope.user.email,
homepage: $scope.user.hompage,
text: $scope.user.text
});
//Clear input fields in main form
$scope.user.name = '';
$scope.user.email = '';
$scope.user.homepage = '';
$scope.user.text = '';
};
$scope.addRepUser = function() {
$scope.bool = false;
//Dynamically create array of objects and push data
$scope.repUsers.push({
name: $scope.repUser.name,
email: $scope.repUser.email,
text: $scope.repUser.text
});
//Clear input fields in main form
$scope.repUser.name = '';
$scope.repUser.email = '';
$scope.repUser.text = '';
};
$scope.createReplyForm = function($event) {
$event.currentTarget.parentNode.parentNode.parentNode.parentNode;
$scope.bool = true;
}
})
I want to insert "replied comment" into wrap of "comment" on which i am replying to, because i want to chain these "comments". The aim is to create cascade commentaries.
To make this question clearer, check this picture of what I want.


You will want to create nesting directives of the same directive.
So you can make this comment item you have into a directive and then call it on itself. Example:
<div class="comment-reply-wrap" ng-repeat="repUser in repUsers">
<div class="comment">
<div class="info" >
<div class="left-side-info">
<img src="img/avatar.png" alt="avatar" class="avatar">
<span class="name">{{repUser.name}}</span>
</div>
<div class="right-side-info">
<p class="user-text" ng-bind-html='repUser.text'>
<img class="comment-image" src="">
</p>
</div>
<div class="bottom">
<span class="comment-email">{{repUser.email}}</span>
<span class="comment-date">10/29/2010 at 6:40AM</span>
<button type="submit" class="reply" ng-click="createReplyForm($event)">
<i class="fa fa-reply" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="reply">
<my-comment-directive ng-repeat="reply in comment.replies" comment="reply"></my-comment-directive>
</div>
</div>
So after seeing your data structures, I see a change you will need to make. You want to iterate over comments, not over users.
Something like this
var commentsArray = [{text: 'comment 1', author: user1, replies: []}]
Where replies are simply an array of the same type of format comments.

Related

how to pass elemnts to a div

I need to pass this element to another active div when i click on the cart i made an e-commerce website
HTML the cart div is active and the cart the box is addto
<div class="active">
<div class="text">
<i class="fa-solid fa-x xmark"></i>
</div>
</div> // this is the cart
<div class="row">
<div class="col col">
<div class="image">
<img src="img/products/f1.jpg" alt="">
</div>
<div class="text">
<h1>T-shirt</h1>
<i class="fa-solid fa-cart-shopping addto"></i>
</div>
</div>
<div class="col col1">
<div class="image">
<img src="img/products/f1.jpg" alt="">
</div>
<div class="text">
<h1>T-shirt2</h1>
<i class="fa-solid fa-cart-shopping addto"></i>
</div>
</div>
</div>
JS
let cart = document.querySelector(".cart");
let cartPage = document.querySelector(".active");
let xMark = document.querySelector(".xmark");
let col1 = document.getElementsByClassName("col1")
let addTo = Array.from(document.getElementsByClassName("addto"));
cart.addEventListener("click",function(){
cartPage.style.width = "30%";
cartPage.style.opacity = "1";
cartPage.style.zIndex = "10";
});
xMark.addEventListener("click",function (){
cartPage.style.width = "0";
cartPage.style.opacity = "0";
cartPage.style.zIndex = "-1";
});
i need when i click on addto variable i need to append the col1 to the cartPage

Getting data from html string and push to array

So i'm making a post request and the response is a string of html and i'm trying to get the data from the "dropUser" part of the html string but i'm having a little trouble and was hoping maybe someone could help me or point me in the right direction.
My goal is to get the data from the "dropUser" html string and push them to an array.
For an example the ID 4289985, and username 'MeowCat i want to get all of them and push to an array.
let str = `<div id="container_user">
<div class="user_count">
<div class="bcell">
Online <span class="ucount back_theme">4</span>
</div>
</div>
<div class="online_user">
<div onclick="dropUser(this,5,'ChatAveBot',1,1,'ZZ','','0','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_avatar.png" /> </div>
<div class="user_item_data">
<p class="username user ">ChatAveBot</p>
</div>
<div class="user_item_icon icrank"><img src="default_images/rank/bot.svg" class="list_rank" title="Bot" /></div>
</div>
<div onclick="dropUser(this,3754679,'Fantastic',1,0,'ZZ','','14','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/avatar_user3754679_1638955491.jpg" /> </div>
<div class="user_item_data">
<p class="username bcolor1 bnfont7">Fantastic</p>
<p class="text_xsmall bustate bellips">TheDD7デイビスになる =🚮</p>
</div>
</div>
<div onclick="dropUser(this,4290052,'cefefef',0,0,'AU','','13','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_guest.png" /> </div>
<div class="user_item_data">
<p class="username user ">cefefef</p>
</div>
</div>
<div onclick="dropUser(this,4289985,'MeowCat',0,0,'AU','','13','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex glob_av" src="/avatar/default_guest.png" /> </div>
<div class="user_item_data">
<p class="username user ">MeowCat</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>`;
let data = [];
//let info = str.split(`'`).forEach(e => e.includes("dropUser"));
console.log(str.split(`'`));

try this:
const htmlStr = `<div id="container_user">
<div class="user_count">
<div class="bcell">
Online <span class="ucount back_theme">4</span>
</div>
</div>
<div class="online_user">
<div onclick="dropUser(this,5,'ChatAveBot',1,1,'ZZ','','0','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_avatar.png" /> </div>
<div class="user_item_data">
<p class="username user ">ChatAveBot</p>
</div>
<div class="user_item_icon icrank"><img src="default_images/rank/bot.svg" class="list_rank" title="Bot" /></div>
</div>
<div onclick="dropUser(this,3754679,'Fantastic',1,0,'ZZ','','14','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/avatar_user3754679_1638955491.jpg" /> </div>
<div class="user_item_data">
<p class="username bcolor1 bnfont7">Fantastic</p>
<p class="text_xsmall bustate bellips">TheDD7デイビスになる =🚮</p>
</div>
</div>
<div onclick="dropUser(this,4290052,'cefefef',0,0,'AU','','13','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_guest.png" /> </div>
<div class="user_item_data">
<p class="username user ">cefefef</p>
</div>
</div>
<div onclick="dropUser(this,4289985,'MeowCat',0,0,'AU','','13','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex glob_av" src="/avatar/default_guest.png" /> </div>
<div class="user_item_data">
<p class="username user ">MeowCat</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>`;
function getUsers(str) {
let div = document.createElement("div");
div.innerHTML = str;
return [...div.querySelectorAll('.user_item')].map(item => {
let id = item.getAttribute('onclick').split(',')[1];
let username = item.querySelector('.username').innerHTML;
return {username, id};
})
};
console.log(getUsers(htmlStr));

I have added two new attribute to each user_item Div instade of reading from html string as text. find data-id in this html.
let str =`<div id="container_user">
<div class="user_count">
<div class="bcell">
Online <span class="ucount back_theme">4</span>
</div>
</div>
<div class="online_user">
<div onclick="dropUser(this,5,'ChatAveBot',1,1,'ZZ','','0','');" class="avtrig user_item " data-id="1" data-name="ChatAveBot">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_avatar.png" /> </div>
<div class="user_item_data">
<p class="username user ">ChatAveBot</p>
</div>
<div class="user_item_icon icrank"><img src="default_images/rank/bot.svg" class="list_rank" title="Bot" /></div>
</div>
</div>
<div class="clear"></div>
</div>`;
Here is the Script to push all to in array
const Users = [];
$.each($(str).find('.user_item'), (userIndex, User) => {
let _user = {};
_user.id = $(User).attr('data-id');
_user.Name = $(User).attr('data-name');
Users.push(_user);
});

One solution I can suggest, as the original post has asked that the arguments passed to the dropUser function needs to be pushed in to an array. This solution is using regex and small string manipulations.
var regex=/dropUser\([A-Za-z0-9,'"]*\)/g;
var result=str.match(regex);
var argumentsArray = new Array();
result.forEach(input =>{ input = input.replace("dropUser(",""); input = input.replace('\)',''); argumentsArray.push(input) })
console.log(argumentsArray) //this will be a 2D array.
after this you should be able to extract the username and id, rather than reading from the .username label.

insert image in a 'background-image' from a pipe

I have the following code in my html document:
<div *ngFor="let search of this.mySearches; let i = index" class="col-sm-6 col-xs-12">
<div class="box">
<div class="image img-search-rounded">
<img [src]="search.postPath | imagenpost: search.generic_category: search.postImg[0]" alt="image" title="image" id="img-rounded" class="img-responsive img-rounded">
</div>
<div class="pull-left">
<h4>{{search.generic_category}}<i class="la la-angle-double-right"></i>{{search.generic_type}}</h4>
<p><i class="la la-map-marker"></i>{{search.generic_city}}</p>
<p><i class="la la-clock-o"></i> {{search.date | date:'medium'}}</p>
<p><i class="la la-circle"></i> Get email notifications</p>
</div>
<div class="pull-right">
<button type="button" [routerLink]="search.url">View</button>
<button type="button" (click)="removeMySearch(search._id)">Delete</button>
</div>
</div>
</div>
but I get this and not the image:
How could I render the image?

It's not quite clear what you're trying to do. It seems like you are trying to do an OR using a ternary operator, but you are missing the else part.
The condition should be something like
<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green'
> : 'red' }"></<div>
Read more about the example here

Google tag manager get closest a text

i want use custom js variable to get card-title a shop-item-title-link's text for the event label = "product x".
Clicking the click class fa-cart-plus to get the label product x;
Click the image to get the label product x
I've tried this js below, but it gets [object] [object] as the result.
function() {
var el = {{Click Element}};
return $(el).closest('card-title').text('a.shop-item-title-link');
}
HTML
<div class="card card-product">
<div class="card-image">
<a href="#" title="product x">
<img width="230" height="230" src="#" class="attachment-_thumbnail" alt="product x">
</a>
<div class="ripple-container"></div>
</div>
<div class="content">
<h6 class="category">Items</h6>
<h4 class="card-title">
<a class="shop-item-title-link" href="#" title="product x">product x</a>
</h4>
<div class="card-description">
<p><span>product descirption</span></p>
</div>
<div class="footer">
<div class="price">
<h4><span class="Price"><span class="Price-currencySymbol">£</span>45.00</span></h4>
</div>
<div class="stats">
<a rel="nofollow" href="#" title="Add to cart">
<i rel="tooltip" data-original-title="Add to cart" class="fa fa-cart-plus"></i>
</a>
</div>
</div>
</div>
</div>

That is a very specific target, what you want to do is use parent and sibling together.
Try something like this:
return $(el).parents().siblings('.card-title').text();

Getting clicked button values jquery

I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.

live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});

jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")

I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/

Categories

Resources