Перво-наперво, извините, но код просто не запускается во фрагменте. Ни codepan, ни jsfiddle. Я все еще загружаю его сюда, но, может быть, попробую запустить его локально. Я использую проект Angular CLI в WebStorm.
В своем приложении я хочу создать что-то вроде списка дел. При нажатии на «Создать новый список» рядом с ним должен быть создан новый прямоугольник (карта дел). Не ниже, не сверху, а справа.
Я сделал .cloneNode() и .appendChild(). Это помогает, но моя проблема в том, что я не могу контролировать расположение результата .appenChild(). Он всегда вставляет новую карточку дел под существующей.
Пожалуйста, кто-нибудь успокоит мой разум !!
import { Component } from '@angular/core'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ShoppingList'; // application name
products = []; // array declaration
itemToAdd;
itemToRemove;
/* --- adds an item in the array --- */
addNewItem () {
if (this.itemToAdd !== null) {
this.products.push(this.itemToAdd)
}
}
/* --- removes all items from array --- */
removeItem () {
const index = this.products.indexOf(this.itemToRemove)
if (index > -1) {
this.products.splice(index)
}
}
/* --- creates new list --- */
createNewList () {
const elementToClone = document.getElementById('listCard')
const clone = elementToClone.cloneNode(true)
document.getElementById('mainContent').appendChild(clone)
console.log(this.products)
console.log(clone)
}
}
.mainContent {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black;
}
ul {
list-style: none none;
margin-left: 0;
padding-left: 0;
}
.listCard {
width: 200px;
height: 300px;
border: 1px solid black;
border-radius: 5px;
margin: 20px;
}
.listTextAndButtons {
display: flex;
flex-direction: column;
border: 1px solid black;
padding: 5px;
margin: 0 20px 20px 20px;
}
.textAreas {
display: flex;
}
.addRemoveButtons {
display: flex;
align-items: center;
justify-content: center;
}
.createNewListButton {
display: flex;
justify-content: center;
}
textarea {
margin: 5px;
border: 1px solid #767676;
border-radius: 4px;
}
button {
margin: 5px;
width: 70%;
height: 30px;
border: 1px solid #767676;
border-radius: 4px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ShoppingList</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div id="mainContent" class="mainContent">
<div id="listCard" class="listCard"></div>
<div class="listTextAndButtons">
<label class="textAreas">
<textarea [(ngModel)]="itemToAdd"></textarea>
<textarea [(ngModel)]="itemToRemove"></textarea>
</label>
<div class="addRemoveButtons">
<button (click)="addNewItem()">Add New Item!</button>
<button (click)="removeItem()">Remove an Item!</button>
</div>
<div class="createNewListButton">
<button (click)="createNewList()">Create a New List!</button>
</div>
</div>
</div>
</body>
</html>