Develop Reference

Update Incremented Quantity in Order Item Total?

I'm trying to update item totals when an image card is clicked and update the corresponding totals and prices in an order panel. See screenshot.
I'm currently incrementing the quantity total onclick in the black circle qty-icon div on the image card using the "Update food quantity" function below which increments the number, but how do I pass that incremented value to the "0 Items" field in the add-order-panel panel at the bottom and update the price in "Add to Order"?
Link to GitHub repo
Live GitHub page
// Update food quantity
$(function() {
$('.food-container').click( function() {
var num = $(this).find('.qty-icon');
num.text( parseInt(num.text()) + 1 );
});
});
<!-- Sliders -->
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>Sliders</h4>
</div>
<div class="food-title right">
<h4>$5</h4>
</div>
</div>
</div>
<!-- Add to Order Panel -->
<div class="add-order-panel down">
<!-- Order Buttons -->
<div class="order-buttons">
<a href="#">
<div class="order-but-container one">
<h4><span class="bold-cash">0</span> Items</h4>
</div>
</a>
<a href="#">
<div class="order-but-container two">
<div class="order-label">
<h4>Add to Order</h4>
</div>
<div>
<h4><span class="bold-cash">$0</span></h4>
</div>
</div>
</a>
</div>
</div>

You can use .each loop to iterate through your food-container div then inside this you need to get qty ,price and add them to some variable . Finally ,show these values insid your total & item quantity spans.
Demo code :
$(function() {
$('.food-container .qty-icon').click(function() {
var num = $(this);
num.text(parseInt(num.text()) + 1);
var qty = 0;
var total = 0;
//loop through your food conatiner divs
$(".food-container").each(function() {
//add total qty on evry iteration
qty += parseInt($(this).find(".qty-icon").text())
//get actual qty
var qty_of_item = parseInt($(this).find(".qty-icon").text())
//mutliply it with price add total
total += parseInt($(this).find('.price').text().replace('$', '')) * qty_of_item;
})
$(".order-but-container.one .bold-cash").text(qty); //set new qty
$("#total").text("$" + total) //set total
});
});
.food-container {
width: 105px;
height: 150px;
border: 1px solid blue;
margin-bottom: 5px
}
.food-icon {
text-align: right;
font-size: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Order Buttons -->
<div class="order-buttons">
<a href="#">
<div class="order-but-container one">
<h4><span class="bold-cash">0</span> Items</h4>
</div>
</a>
<a href="#">
<div class="order-but-container two">
<div class="order-label">
<h4>Add to Order</h4>
</div>
<div>
<!--added here id-->
<h4><span id="total" class="bold-cash">$0</span></h4>
</div>
</div>
</a>
</div>
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>pizza</h4>
</div>
<div class="food-title right">
<!--added here class-->
<h4 class="price">$10</h4>
</div>
</div>
</div>
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>burger</h4>
</div>
<div class="food-title right">
<h4 class="price">$5</h4>
</div>
</div>
</div>
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>somethings</h4>
</div>
<div class="food-title right">
<h4 class="price">$5</h4>
</div>
</div>
</div>
<div class="add-order-panel down">

You're over thinking it :) You're already storing the element your wanting into a variable called "num". Then you're grabbing the text inside of it. Here's what you do.
redefine num to be the text of the element.
do this for every other element you want to update the text for.
then add all of the values of those inside the function.
save that in a var called total and update that in the area where the total should be
make sure to start total at 0 every time the function runs or you will compound the value
note you'll want to declare all of your variables globally and then update them locally. Don't declare any variables locally or they will come back undefined when you try to update them in other functions
$(function() {
let total = 0
$('.food-container').click( function()
{var num = $(this).find('.qty-icon');
num = num.text( parseInt(num.text()) + 1 );
total = num + otherVar + yetAnotherVar});});

how to style multiple modals through Javascript

I want to select multiple modals through Javascript. I have already set an id on every modal.
So far I am able to loop through the elements but I don't know how to grab every id of modals.
Here is my HTML:
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Here is my Javascript:
const projects = document.querySelectorAll('.projects > div');
for(var i = 0; i< projects.length;i++){
var thisBtn = projects[i];
thisBtn.addEventListener('click', ()=> {
var modal = document.getElementById(this.dataset.modal);
modal.style.display = 'block';
}, false);
}
I saw this.dataset.modal implement at one of the solutions. But unfortunately, it didn't work. How can I grab that particular id of element when its parent modal is clicked.
Any help would be appreciated.
Code for closing modal when clicking outside:
window.addEventListener('click',function(){
for(var i = 0; i<coffeeGrounds.length; i++){
var x = coffeeGrounds[i].getAttribute('data-modal');
var a = document.getElementById(x);
console.log(a);
if(a.style.display === 'block'){
a.setAttribute('style','display:none');
}
}
});

Open modeal: The first loop puts "addEventListener" which takes date information with the ID of the modal.
Close modal: The second loop takes all the "close" buttons. Puts "addEventListener" when this button is pressed, it applies a style display:none; to the parent item
const projects = document.querySelectorAll('.projects > div');
for (var i = 0; i < projects.length; i++) {
projects[i].addEventListener('click', function () {
var x = this.getAttribute('data-modal');
document.getElementById(x).setAttribute('style', 'display:block;');
});
}
const close = document.querySelectorAll('.close');
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function () {
var x = this.parentElement;
x.setAttribute('style', 'display:none;');
});
}
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1" style="display:none;">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2" style="display:none;">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>

There is no this in arrow (=>) function syntax, use normal function syntax instead.
Demo:
const projects = document.querySelectorAll('.projects > div');
for(var i = 0; i < projects.length;i++){
var thisBtn = projects[i];
thisBtn.addEventListener('click', function() {
var modal = document.getElementById(this.dataset.modal);
modal.style.display = 'block';
console.log('You have clicked: ' +this.dataset.modal);
}, false);
}
.project-card{
display: none;
}
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>

setTimeout function on a <div>

I am working on my own portfolio and I want to put a delay between 2 pages with a setTimeout function. I've tried some ways but haven't worked yet. I am already using a function to open my "href" with all my box but now I just want to put a delay to go from accueil.html to presentation.html.
"accueil.html":
document.addEventListener('DOMContentLoaded', function()
{
var items = document.querySelectorAll('.ouverture');
for (var i = 0; i < items.length; i++)
{
var item = items[i];
item.addEventListener('click', function()
{
var url = this.getElementsByTagName('a');
url = url[0];
window.location = url;
});
}
});
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>Présentation</h4>
</div>
</div>
</div>
</div>
</div>
</div>

Just add a timeout add the part where you redirect to another page:
item.addEventListener('click', function() {
var url = this.getElementsByTagName('a');
if(url.length > 0)
url = url[0];
setTimeOut(() => {
window.location = url;
}, 2000); // 2000 = 2000ms === 2sec
});
More info is found here

A general-purpose snippet that "delays" clicks. Just add the script at the top of the page and use the delay-click[=numberOfMilliseconds] attribute.
document.body.addEventListener("click", function(event) {
var target = event.target;
var currentTarget = target.closest("[delay-click]:not(.delay-click-ignore)");
if (!currentTarget) return;
var delay = +currentTarget.getAttribute("delay") || 2000;
currentTarget.classList.add("delay-click-ignore");
setTimeout(function() {
target.click();
currentTarget.classList.remove("delay-click-ignore");
}, delay);
event.preventDefault();
});
.delay-click-ignore,
.delay-click-ignore a,
.delay-click-ignore input,
.delay-click-ignore button {
cursor: progress !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<!-- on the element itself -->
<h4><a href="presentation.html" delay-click>default delay</a></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- or somewhere up the ranks -->
<div class="box-part text-center ouverture" delay-click=5000>
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>delay 5s</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>immediate</h4>
</div>
</div>
</div>
</div>
<div class="form-group">
<!-- works here too -->
<input type="checkbox" class="form-control" delay-click />
</div>
</div>
</div>

How can I show/hide extra divs depending on data value set?

I have some JavaScript (Jquery) that will show a set amount of div's depending on the data arbitrate in the html.
If attribute set to 3 it will show 3 div's and clicking 'show more' will show all div's
It needs to do this for multiple sections, each with their own data attribute and only show or hide the divs that belong to the section clicked.
My current problem is that all sections are being shown on click and then vanishing as soon as they appear.
The desired effect is to have each section hide and show based on the click individually.
var INF = window.INF || {};
INF.sectorPageStrengths = (function(window, $, namespace) {
'use strict';
//variables
var _sectorPageStrengths = $('.sectorpage-strengths'),
_elements = 0,
// methods
init,
_bindShowMore, _bindShowLess,
_adjustHeigt, _checkElemnt, equalHeight;
_checkElemnt = function($element) {
var _vp = INF.global.device.viewportN;
if (_vp === 0) {
var count = $element.data('desktop');
$element.find('.marg1:nth-child(n+' + (count + 1) + ')').hide();
if ($element.find('.marg1').length >= (count + 1)) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = count;
} else if (_vp === 1) {
$element.find('.marg1:nth-child(n+5)').hide();
if ($element.find('.marg1').length > 4) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = 4;
} else {
$element.find('.marg1:nth-child(n+4)').hide();
_elements = 3;
}
};
_bindShowMore = function(container) {
// if data-items, data-infinite is defined, used it
var _showMore = $('.view-all-sectors-btn');
_showMore.on('click', function() {
$('.sectorpage-strengths .container > .row + .row >.marg1:nth-child(n+' + (_elements + 1) + ')').slideToggle();
$(this).parents('.sectorpage-strengths').toggleClass('showLess');
});
};
_bindShowLess = function() {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
_showLess.on('click', function() {
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top - 35
}, 700);
});
};
init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
if (_sectorPageStrengths.length > 0) {
_checkElemnt($(element));
_bindShowMore(_sectorPageStrengths);
_bindShowLess();
$(window).on('load', function() {
equalHeight();
});
}
});
$("#loadPDFComponentModal").on('hidden.bs.modal', function() {
$("#hiddenIframe").html("");
});
};
return {
init: init
};
}(this, jQuery, 'INF'));
jQuery(INF.sectorPageStrengths.init());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1" style="display: none;">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1" style="display: none;">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>

You are listening all the 'view more' button click in your code. so it causing problem.
Update code
code should handle individual container. The file changes are,
_checkElemnt = function($element) {
var _vp = 0;//INF.global.device.viewportN;
if (_vp === 0) {
var count = $element.data('desktop');
$element.find('.marg1').hide();
if ($element.find('.marg1').length >= (count + 1)) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = count;
} else if (_vp === 1) {
$element.find('.marg1:nth-child(n+5)').hide();
if ($element.find('.marg1').length > 4) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = 4;
} else {
$element.find('.marg1:nth-child(n+4)').hide();
_elements = 3;
}
$element.find('.marg1').slice(0,count).each(function(index, ele){
$(ele).attr('data-display', true).show();
});
};
and
_bindShowMore = function(container) {
var _showMore = $(container).find('.view-all-sectors-btn');
_showMore.on('click', function(element) {
var isAllVisible = $(this).closest('.sectorpage-strengths').hasClass('showLess');
$(this).closest('.container').find('.row + .row >.marg1:not([data-display])').slideToggle();
$(this).parents('.sectorpage-strengths').toggleClass('showLess');
$(this).text(isAllVisible ?'view more' : 'view less');
if(isAllVisible){
console.log('isAllVisible', isAllVisible); // you handle some other action here if required
}
});
};
and
init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
if (_sectorPageStrengths.length > 0) {
_checkElemnt($(element));
_bindShowMore(element);
// _bindShowLess(); this behaviour handled in bindShowMore itself
$(window).on('load', function() {
equalHeight();
});
}
});
i hope this will help you.

Here I bypass your code to just provide the simplest answer to the actual issue. I will leave it to you to work that in your code.
NOTE If you choose to not use a class you can do .toggle(true); instead of .toggleClass('hidden', true);
I used a class to simplify the original HTML.
$('.sectorpage-strengths').on('click', '.view-all-sectors-btn', function(event) {
var sect = $(event.delegateTarget);
var sectCount = sect.data('desktop');
var strengths = sect.find('.sectorpage-strengths-list').find('.marg1');
strengths.toggleClass('hidden', false);
var showCount = $(this).hasClass('less') ? strengths.length - 1 : sectCount - 1;
strengths.slice(0, showCount).toggleClass('hidden', true);
$(this).toggleClass('hidden', true);
$(this).siblings('.view-all-sectors-btn').toggleClass('hidden', false);
});
.sectorpage-strengths .marg1 {
border: solid lime 1px;
}
.yellow-container {
height: 140px;
background-color: #FFFFE0;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main1</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading1 1</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1 hidden">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading1 2</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main2</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading2 1</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1 hidden">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading2 2</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>

AngularJs how to insert one div in another?

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.