0

Создал TodDo list по туториалу. Хочу сделать дополнительное поле ввода даты, рядом с полем ввода задания, чтобы при отображении задания рядышком отображалась выбранная дата, или сегодняшняя, если ничего не введено в поле даты.(рисунок прикладываю, хочу чтобы напротив "Do homework" была выведена дата, которую записали в инпут по by) Не могу разобраться с алгоритмом как и что делать: нужно создать класс Date, после этого добавить в метод, где создается задание? или есть какой то более простой способ? Попытался написать сам - не вышло, вот ссылка на гитхаб. гитхаб введите сюда описание изображения

6
  • В какой момент времени вы хотите дату выводить? При отображении списка или при создании нового задания? 2 ноя 2017 в 2:47
  • @SergeyRogachev я хочу вводить дату после ввода задания и чтобы она отображалась рядом с заданием при его выводе в списке 2 ноя 2017 в 6:47
  • В этой строке у вас инициализация текстового поля. В следующей строке просто this.todoDate = new Date(); 2 ноя 2017 в 8:54
  • @SergeyRogachev если я задам эту строку, то дата будет появляться в в поле ввода, а не рядом с заданием в листе. 2 ноя 2017 в 9:42
  • А вы где хотите? 2 ноя 2017 в 10:46

1 ответ 1

0

Сделайте так в разметке:

<div class="form-group">
    <label class="col-xs-12 col-sm-2 control-label">Задача:</label>
    <div class="col-xs-12 col-sm-10">
        <input class="form-control " type="text" [(ngModel)]="item.text">                
    </div>
</div>
<div class="form-group">
    <label class="col-xs-12 col-sm-2 control-label">Время:</label>
    <div class="col-xs-12 col-sm-10">
        <input class="form-control " type="text" [(ngModel)]="item.date">                
    </div>
</div>

Todo сделайте так:

export class Todo {
   id: number;
   text: string;
   date: string;

   constructor(id: number, text: string, date: string) {
       this.id = id;
       this.text = text;
       this.date = date;
    }
}   

Вывод сделайте примерно так:

<div class="col-xs-4">
    <span [textContent]="item.text"></span>
</div>
<div class="col-xs-4">
    <span [textContent]="item.date"></span>
</div>
<div class="col-xs-4">
    <button class="btn btn-primary"> Удалить </button>
</div>
3
  • не совсем понял, что это, зачем вы сделали кнопку. я пытаюсь сделать просто отображение введенной даты рядом с введенным текстом 3 ноя 2017 в 10:39
  • Где? В каком файле. Укажите точнее. 3 ноя 2017 в 11:20
  • исправил вопрос, спасибо 3 ноя 2017 в 13:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.