I am Beginner developer and i try to clone website (using HTML,CSS,JS)
and I stuck in Add products on shopping cart and these my Code:
const listProducts = [
{
id: 1,
name: 'Short Pant',
price: '300.000 VND',
imageUrl: 'img/1.jpg',
button: 'Add to Cart'
},
{
id: 2,
name: 'Long Pant',
price: '500.000 VND',
imageUrl: 'img/2.jpg',
button: 'Add to Cart'
},
{
id: 3,
name: 'Long Shirt',
price: '400.000 VND',
imageUrl: 'img/3.jpg',
button: 'Add to Cart'
},
{
id: 4,
name: 'T-Shirt',
price: '200.000 VND',
imageUrl: 'img/4.jpg',
button: 'Add to Cart'
}
];
const product = document.getElementsByClassName("product");
let item = "";
let listItem = item => {
for (i = 0; i < listProducts.length; i++) {
item += `
<div class="product-item">
<img src="${listProducts[i].imageUrl}" alt="ảnh" />
<h2>${listProducts[i].name}</h2>
<div><span>${listProducts[i].price}</span></div>
<button class="btn">${listProducts[i].button}</button></div>`
}
return item
}
product[0].innerHTML = listItem();
let btnCart = document.getElementsByClassName('btn')
for (j = 0; j < listProducts.length; j++) {
addEventListener('click', function() {
this.document.querySelector('.listCart').append(item)
})
And this is my HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
max-width: 350px;
height: 350px;
object-fit: contain;
}
.product {
display: flex;
justify-content: space-around;
}
.product-item {
border: 1px solid;
text-align: center;
}
h2 {
border-top: 1px solid black;
text-align: center;
margin-top: 50px;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="product"></div>
<div class="cart">
<div class="listCart">
<h2>Cart</h2>
</div>
</div>
<script src="bai10.js"></script>
</body>
</html>
I am Beginner developer and i try to clone website (using HTML,CSS,JS)
and I stuck in Add products on shopping cart and these my Code:
I am Beginner developer and i try to clone website (using HTML,CSS,JS)
and I stuck in Add products on shopping cart and these my Code:
I am Beginner developer and i try to clone website (using HTML,CSS,JS)
and I stuck in Add products on shopping cart and these my Code:
Related
Good day folks,
I am creating a to-do app, and so far when I enter the task in via the input the console shows my object firing but does not display it on the screen. Please look at my code and help me point out the issue, I have been debugging this for some time today.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/to-doStylesheet.css">
<title>To-Do App</title>
</head>
<body>
<div class=container>
<div class= base>
<div class = screen>
<img src="images/WarGreymon_Render.png" alt="Wargreymon">
<div id ="speach-bubble"> What is on your
agenda for today?
</div>
<div class = "dateTime">
</div>
</div>
<div class = "nameInput" id = "inputContainer">
<form class ="form">
<input type="text" class ="userInput" placeholder="Add Agenda and press enter">
<input type="submit" value ="Add">
</form>
</div>
</div>
<ul class="list"></ul>
<script src="js/add-task.js"></script>
</body>
</html>
CSS
.form
{
margin-left: 400px;
}
.userInput
{
width: 394px;
height: 30px;
background-color: #B62626;
font-family: Digimon Basic;
color: #33D61A;
margin-left: -359px;
}
.userInput ::placeholder
{
color: #33D61A;
font-family: Digimon Basic;
}
.list:empty
{
display: none;
}
.list
{
list-style: none;
margin-bottom: 20px;
}
.input[type="checkbox"] {
display: none;
}
.tick {
width: 30px;
height: 30px;
border: 3px solid #333;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.todo-item {
margin-bottom: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.todo-item span {
flex-grow: 1;
margin-left: 10px;
margin-right: 10px;
font-size: 22px;
}
JS
let tasks = [];
const currentdt = new Date()
function todo(text) {
const todo = {
text,
checked: false,
id: Date.now(),
timestamp: currentdt
};
tasks.push(todo);
console.log(tasks);
}
// Select the form element
const form = document.querySelector('.form');
// Add a submit event listener
form.addEventListener('submit', event => {
// prevent page refresh on form submission
event.preventDefault();
// select the text input
const input = document.querySelector('.userInput');
// Get the value of the input and remove whitespace
const text = input.value.trim();
if (text !== '') {
todo(text);
input.value = '';
input.focus();
}
});
//This function is to display new to do on the screen
function displaytasks(todo)
{
const list = document.querySelector('list');
const isChecked = todo.checked ? 'done': '';
const addedList = document.createElement("li");
addedList.setAttribute('class', `todo-item ${isChecked}`);
addedList.setAttribute('data-key', todo.timestamp);
addedList.innerHTML = `<input id="${todo.timestamp}" type="checkbox"/>
<label for="${todo.timestamp}" class="tick js-tick"></label>
<span>${todo.text}</span>
<button class="delete-todo js-delete-todo">
<img class = "delete" src="images/delete.png" alt="delete icon">
</button>`;
list.append(addedList);
}
So I am busy with the js file at the moment, I think it has to do something with the innerHTML, but I am not sure what exactly is wrong there, because when I look in the console on the HTML side I do not see the <ul class="list"></ul> firing at all to bring the new HTML elements.
Your help will be much appreciated
It looks like the code to display the todos is not being called, so I would recommend you add in a function call after reading in a new todo.
...
const text = input.value.trim();
if (text !== '') {
todo(text);
input.value = '';
input.focus();
displaytasks(tasks); // Show tasks after submission
}
});
//This function is to display new to do on the screen
function displaytasks(todo)
{
const list = document.querySelector('.list');
...
I have a grid of cards with a button to remove each one of them with an animation. I chose to reduce the width to 0 so that the cards to the right (on the same row) slide to the left and occupy the removed card spot.
What I would like to achieve is to animate the first element of the following row into the last position of the row above (the one that had the card removed).
The best example I can provide is the home page of the Vivaldi browser, where you can remove a speed dial widget and the following ones animate to their new positions.
This example in CodePen is what I have so far.
$(document).ready(function() {
const content = $('#inner-content');
let listCourses = '';
let courses = [
{ title: 'html' },
{ title: 'css' },
{ title: 'javascript' },
{ title: 'python' },
{ title: 'react' },
{ title: 'node' },
{ title: 'angular' },
{ title: 'SEO' },
{ title: 'UX/UI' },
{ title: 'jQuery' },
{ title: 'SQL' },
{ title: 'noSql' }
]
courses.forEach((course) => {
let newCourse = `
<div class="course-container">
<div class="inner-container">
<h2>${course.title}</h2>
<button class="courses-control"> Remove </button>
</div>
</div>
`;
listCourses += newCourse;
});
content.html(listCourses);
$('.courses-control').on('click', function(e){
$(this)
.parents('.course-container').animate({
'width': '0px',
'padding': '12px 0px',
'opacity': '0'}, function() {
$(this).remove();
});
})
});
* {
box-sizing: border-box;
}
body { font-family: 'lato'; }
#inner-content {
display: flex;
flex-wrap: wrap;
}
.centered {
max-width: 960px;
margin: auto;
}
.course-container {
width: 25%;
padding: 12px;
overflow: hidden;
}
.inner-container {
overflow: hidden;
text-align: center;
border: 1px solid gray;
border-radius: 6px;
padding: 12px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Courses</h1>
<div id="inner-content" class="centered">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
change the forEach loop to have an index and give each button an id:
courses.forEach((course, index) => {
let newCourse = `
<div class="course-container">
<div class="inner-container">
<h2>${course.title}</h2>
<button id="${index}" class="courses-control"> Remove </button>
</div>
</div>
`;
listCourses += newCourse;
});
Then in the click function after this:
$(this)
.parents('.course-container').animate({
'width': '0px',
'padding': '12px 0px',
'opacity': '0'
}, function () {
$(this).remove();
});
add this:
$(`#${Number(this.id) + 4}`).parents('.course-container').animate({
'margin-top': '-100px',
'z-index': '1',
'opacity': '0'
}, 500, function () {
$(this).css({ 'margin': '0px', 'opacity': '1' });
});
Try it out and tell me what you think...
Hi guys I am trying to create a Carousel using JS. I have succeeded a bit and I able to move one slide to the right side. I figure if I somehow increase the value of widthToMove variable then by clicking on right arrow button will keep pushing the slides. I tried to create a function that returns simply 1, 2, 3, and so on and multiply it with widthToMove on clicking right arrow button but I could not succeed. Any help will highly be appreciated.
Here is the html code;
var productDataWomens = [
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/dark-grey-faux-fur-longline-coat/p/619712403',
imageSrc: 'https://media2.newlookassets.com/i/newlook/619712403.jpg',
productTitle: 'Dark Grey Faux Fur Longline Coat',
price: '45.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/tops/black-ribbed-long-sleeve-roll-neck-top/p/635105501',
imageSrc: 'https://media2.newlookassets.com/i/newlook/635105501.jpg',
productTitle: 'Black Ribbed Long Sleeve Roll Neck Top',
price: '8.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/leggings/black-coated-leather-look-leggings/p/634018201',
imageSrc: 'https://media3.newlookassets.com/i/newlook/634018201.jpg',
productTitle: 'Black Coated Leather-Look Leggings',
price: '19.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/black-faux-fur-longline-coat/p/619712401',
imageSrc: 'https://media3.newlookassets.com/i/newlook/619712401.jpg',
productTitle: 'Black Faux Fur Longline Coat',
price: '45.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/jeans/black-high-waist-super-skinny-hallie-jeans/p/635654901',
imageSrc: 'https://media2.newlookassets.com/i/newlook/635654901.jpg',
productTitle: 'Black High Waist Super Skinny Hallie Jeans',
price: '25.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/formal-coats/camel-revere-collar-coat/p/619653214',
imageSrc: 'https://media2.newlookassets.com/i/newlook/619653214.jpg',
productTitle: 'Camel Revere Collar Coat',
price: '35.99',
}
]
for (i in productDataWomens) {
var node = document.createElement('LI');
node.setAttribute('class', 'carousel-list-item' + ' ' + 'current-slide');
var carouselImg = document.createElement('img');
carouselImg.setAttribute('class', 'carousel-images');
carouselImg.src = productDataWomens[i].imageSrc;
node.appendChild(carouselImg);
document.getElementById('carousel-list-id').appendChild(node);
}
const track = document.querySelector('.carousel-list-items');
console.log(track);
const slides = Array.from(track.children);
console.log(slides);
const nextButton = document.querySelector('.right-button');
const prevButton = document.querySelector('.left-button');
const slideWidth = slides[0].getBoundingClientRect().width;
nextButton.addEventListener('click', (e) => {
let currentSlide = track.querySelector('.current-slide');
console.log(currentSlide);
let widthToMove = currentSlide.clientWidth;
console.log(slides[0]);
widthToMove = widthToMove + 'px';
console.log(widthToMove);
let nextSlide = currentSlide.nextElementSibling;
console.log(nextSlide);
//const amountToMove = nextSlide.style.widthToMove;
track.style.transform = 'translateX(-' + widthToMove + ')';
currentSlide.classList.remove('current-slide');
//nextSlide.classList.add('current-slide');
});
.carousel {
display: flex;
justify-content: space-between;
/* overflow-x: hidden; */
width: 80%;
margin: 0 auto;
}
.carousel-list-items {
display: flex;
justify-content: space-between;
}
.carousel-container {
overflow-x: hidden;
}
.carousel-list {
list-style: none;
}
.carousel-images {
padding: 15px;
height: 200px;
}
.carousel-button {
position: relative;
background-color: transparent;
border: none;
cursor: pointer;
outline: 0;
}
.right-button {
right: 0;
margin-left: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/88ce2b0d97.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<title>New Look</title>
</head>
<body>
<div class="carousel">
<button class="left-button carousel-button"><i class="fas fa-chevron-left"></i></button>
<div class="carousel-container" >
<ul class="carousel-list">
<a href="" id="carousel-list-id" class="carousel-list-items">
<!-- <li class="carousel-list-item current-slide" id="carousel-list-id"></li> -->
</a>
</ul>
</div>
<button class="right-button carousel-button"><i class="fas fa-chevron-right"></i></button>
</div>
<script src="script.js"></script>
</script>
</body>
</html>
The problem with your slider is that each time you click on the next button the widthToMove variable is overwritten with currentSlide.clientWidth, what you should've done instead is:
take widthToMove variable outside the scope of the listener
on each click add the values of widthToMove and currentSlide.clientWidth and assign the sum to widthToMove
Also when your slider is "initialized", every slide has the class current-slide therefore you can't determine which slide is the current.
var productDataWomens = [
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/dark-grey-faux-fur-longline-coat/p/619712403',
imageSrc: 'https://media2.newlookassets.com/i/newlook/619712403.jpg',
productTitle: 'Dark Grey Faux Fur Longline Coat',
price: '45.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/tops/black-ribbed-long-sleeve-roll-neck-top/p/635105501',
imageSrc: 'https://media2.newlookassets.com/i/newlook/635105501.jpg',
productTitle: 'Black Ribbed Long Sleeve Roll Neck Top',
price: '8.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/leggings/black-coated-leather-look-leggings/p/634018201',
imageSrc: 'https://media3.newlookassets.com/i/newlook/634018201.jpg',
productTitle: 'Black Coated Leather-Look Leggings',
price: '19.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/black-faux-fur-longline-coat/p/619712401',
imageSrc: 'https://media3.newlookassets.com/i/newlook/619712401.jpg',
productTitle: 'Black Faux Fur Longline Coat',
price: '45.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/jeans/black-high-waist-super-skinny-hallie-jeans/p/635654901',
imageSrc: 'https://media2.newlookassets.com/i/newlook/635654901.jpg',
productTitle: 'Black High Waist Super Skinny Hallie Jeans',
price: '25.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/formal-coats/camel-revere-collar-coat/p/619653214',
imageSrc: 'https://media2.newlookassets.com/i/newlook/619653214.jpg',
productTitle: 'Camel Revere Collar Coat',
price: '35.99',
}
]
for (i in productDataWomens) {
var node = document.createElement('LI');
// If it's the first slide add .current-slide
// The line below uses a turnary operator which is a short if/else statement
var currentSlide = ( i == 0 ? ' current-slide' : '' );
// Which can be rewritten to this
//var currentSlide;
//if( i == 0 ) {
// currentSlide == ' current-slide';
//} else {
// currentSlide == '';
//}
node.setAttribute('class', 'carousel-list-item' + currentSlide );
var carouselImg = document.createElement('img');
carouselImg.setAttribute('class', 'carousel-images');
carouselImg.src = productDataWomens[i].imageSrc;
node.appendChild(carouselImg);
document.getElementById('carousel-list-id').appendChild(node);
}
const track = document.querySelector('.carousel-list-items');
const nextButton = document.querySelector('.right-button');
const prevButton = document.querySelector('.left-button');
let widthToMove = 0;
nextButton.addEventListener('click', (e) => {
let currentSlide = track.querySelector('.current-slide');
let nextSlide;
if( !currentSlide.nextElementSibling ) {
nextSlide = document.querySelectorAll('.carousel-list-item')[0];
widthToMove = 0;
} else {
nextSlide = currentSlide.nextElementSibling;
widthToMove += currentSlide.clientWidth;
}
// You can use template literals to create a string with several variables/functions/expressions for speed, convenience and readability
track.style.transform = `translateX(-${widthToMove + 30}px)`;
currentSlide.classList.remove('current-slide');
// Add current-slide class to next slide
nextSlide.classList.add('current-slide');
});
.carousel {
display: flex;
justify-content: space-between;
/* overflow-x: hidden; */
width: 80%;
margin: 0 auto;
}
.carousel-list-items {
display: flex;
justify-content: space-between;
transition: all 0.3s ease-in-out 0s;
}
.carousel-container {
overflow-x: hidden;
}
.carousel-list {
list-style: none;
}
.carousel-images {
padding: 15px;
height: 200px;
}
.carousel-button {
position: relative;
background-color: transparent;
border: none;
cursor: pointer;
outline: 0;
}
.right-button {
right: 0;
margin-left: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/88ce2b0d97.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<title>New Look</title>
</head>
<body>
<div class="carousel">
<button class="left-button carousel-button"><i class="fas fa-chevron-left"></i></button>
<div class="carousel-container" >
<ul class="carousel-list">
<a href="" id="carousel-list-id" class="carousel-list-items">
<!-- <li class="carousel-list-item current-slide" id="carousel-list-id"></li> -->
</a>
</ul>
</div>
<button class="right-button carousel-button"><i class="fas fa-chevron-right"></i></button>
</div>
<script src="script.js"></script>
</script>
</body>
</html>
I have the following code below:
https://codesandbox.io/s/dropdown-forked-pojgt?file=/src/index.js
In this example, I currently have these 2 lines embedded in the buildOptions function:
const allOptions = document.querySelectorAll(".option");
allOptions.forEach((op) => op.addEventListener("click", selectOptions));
Now the selectOptions will be activated upon clicking. However, since I'm interested in functional programming, is there a way for me to decouple that logic from the buildOptions function?
Furthermore, from a code perspective, is the code in the codesandbox above a good way to organize my code?
Edit:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
</head>
<body>
<div id="root">
<div class="optionBox">Select an option</div>
</div>
<div id="result"></div>
<hr />
<div id="details">
<p>What we're building</p>
<div style="display: flex; align-items: flex-start;">
<img src="https://i.imgur.com/AXoKKc5.png" width="122" />
<img src="https://i.imgur.com/mZwI3g0.png" width="123" />
<img src="https://i.imgur.com/S1LU4yf.png" width="106" />
</div>
<ul>
<li>A dropdown can have multiple options</li>
<li>
You must be able to handle the dropdown changing to a new value and
display it somewhere
</li>
<li>
you may change public/index.html if you wish to start with specific
markup
</li>
</ul>
</div>
</body>
</html>
JS:
import "./index.css";
// Assertions
// #root exists in the DOM as a node you can access
function optionBox(node, options = {}) {
let curr = 0;
node.addEventListener("click", buildOptions);
let optionsWrapped = null;
//buildOptions
function buildOptions() {
optionsWrapped = document.createElement("div");
optionsWrapped.classList.add("optionsWrapped");
curr = curr + 1;
if (curr % 2 === 1) {
for (let option in options) {
const optVal = options[option];
const optionDiv = document.createElement("div");
optionDiv.classList.add("option");
optionDiv.textContent = optVal;
optionsWrapped.appendChild(optionDiv);
}
node.appendChild(optionsWrapped);
const allOptions = document.querySelectorAll(".option");
allOptions.forEach((op) => op.addEventListener("click", selectOptions));
} else {
node.removeChild(node.childNodes[1]);
}
}
function selectOptions(e) {
const replacedNode = document.createElement("div");
replacedNode.textContent = e.target.textContent;
replacedNode.classList.add("replacedNode");
node.replaceWith(replacedNode);
}
return node;
}
optionBox(document.querySelector(".optionBox"), {
op1: "option 1",
op2: "option 2",
op3: "option 3"
});
CSS:
.optionBox {
border: 1px solid black;
width: 200px;
height: 30px;
margin-bottom: 100px;
}
.optionsWrapped {
border: 1px solid blue;
width: 100px;
height: 80px;
margin-top: 10px;
}
.replacedNode {
border: 1px solid black;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
}
I am a newbie to angular JS and having problem in adding the spliced value back to the list.
How cam i do so or can i use any other Angular JS function in place of splice to do the need full.
Below is the code i have do.
{
<!DOCTYPE html>
<html>
<head>
<title>Drag Drop + Remove Element</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
<style>
[ng-drag] {
width: 100px;
height: 100px;
background: red;
color: white;
text-align: center;
padding-top: 40px;
display: block;
}
[ng-drop] {
background: silver;
text-align: center;
display: block;
position: relative;
padding: 20px;
width: 140px;
height: 140px;
float: left;
}
.draglist {
display: inline-block;
margin: 0 auto;
}
[ng-drag].dragging {
opacity: 0.5;
}
[ng-drag].drag-over {
border: solid 1px red;
}
[ng-drop].drag-enter {
border: solid 5px red;
}
</style>
</head>
<body ng-app="ExampleApp">
<div class="row text-center">
<h1>Drag Drop + Remove Element</h1>
</div>
<div class="row text-center" ng-controller="MainCtrl">
<ul class="draglist">
<li ng-repeat="obj in draggableObjects | limitTo:quantity" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)" >
<button type="button" class="close" ng-click="removeElement($index,draggableObjects.length)"><span aria-hidden="true" ng-mouseover>×</span></button>
<div ng-drag="true" ng-drag-data="obj" ng-class="obj.name">
{{obj.name}}
</div>
</li>
</ul>
</div>
<!--<script src="http://code.angularjs.org/1.3.15/angular.min.js"></script>-->
<script src="Angular.js"></script>
<script src="ngDraggable.js"></script>
<script>
angular.module('ExampleApp', ['ngDraggable']).
controller('MainCtrl', function ($scope, $window) {
$scope.draggableObjects = [
{name: 'one'},
{name: 'two'},
{name: 'three'},
{name: 'four'},
{name: 'five'},
{name: 'six'},
{name: 'seven'},
{name: 'eight'},
{name: 'nine'},
{name: 'ten'}
];
$scope.quantity = 3;
$scope.showDelete = false;
$scope.removeElement = function(index, objLength){
console.log("objLength::"+objLength);
$scope.showDelete = true;
if(objLength < 4){
console.log("In if");
// $window.location.reload();
// $scope.draggableObjects;
console.log($scope.draggableObjects);
$scope.draggableObjects = $scope.draggableObjects.concat($scope.draggableObjects);
// angular.forEach($scope.draggableObjects, function(objects) {
// $scope.draggableObjects.push(objects);
//// console.log($scope.draggableObjects);
// });
}
else{
$scope.draggableObjects.splice(index,1);
}
};
$scope.onDropComplete = function (index, obj, evt) {
var otherObj = $scope.draggableObjects[index];
var otherIndex = $scope.draggableObjects.indexOf(obj);
$scope.draggableObjects[index] = obj;
$scope.draggableObjects[otherIndex] = otherObj;
};
});
</script>
</body>
</html>
}
Now what i want to do is once the value get spliced from the $scope.draggableObjects i want to add the spliced data again at the end of the code so that a cycle is continued of all the values in scope.
Any help will be welcomed.
Thanks in advance.
just javascript
$scope.draggableObjects.push(obj) // obj prev removed