В первой части этой серии руководств по Angular вы увидели, как начать создавать менеджер списков покупок с помощью Angular. Вы узнали, как создать представление для компонента «Бакалея», добавлять элементы в список «Бакалея» и отображать добавленные элементы.
В этой части вы реализуете функции для маркировки завершенных элементов, редактирования существующих и удаления добавленных элементов.
Начиная
Давайте начнем с клонирования исходного кода из первой части урока. С вашего терминала напишите следующий код для клонирования исходного кода:
|
1
|
git clone https://github.com/royagasthyan/AngularGrocery
|
После того, как исходный код был клонирован, перейдите в папку проекта и установите необходимые зависимости.
|
1
2
|
cd AngularGrocery
npm install
|
После установки зависимостей вы сможете запустить сервер. В папке проекта введите следующие команды:
|
1
|
ng serve
|
Укажите в браузере http: // localhost: 4200 /, и приложение должно быть запущено.
Обновление продуктовых предметов
Как только вы добавили в список продуктовые товары, вы сможете редактировать и обновлять их. Давайте предоставим кнопку редактирования в сетке списков, которая, при нажатии, позволит редактировать существующие элементы.
Измените код app.grocery.html чтобы включить кнопку редактирования в сетке.
|
1
|
<span class=»glyphicon glyphicon-pencil floatright»>
|
Сохраните вышеуказанные изменения и перезагрузите сервер. Загрузите страницу и введите несколько элементов, и у вас будет кнопка редактирования для каждого элемента.
Когда пользователь нажимает кнопку редактирования, необходимо добавить метод щелчка для обработки редактирования элемента. Измените app.grocery.html чтобы добавить событие нажатия для редактирования элемента.
|
1
|
<span (click)=»onEdit(task)» class=»glyphicon glyphicon-pencil floatright»>
|
Передайте task методу onEdit как показано в приведенном выше коде, чтобы определить элемент, подлежащий редактированию.
Внутри класса GroceryComponent инициализируйте переменную области действия task как показано:
|
1
2
3
4
|
task = {
name: »,
id: 0
};
|
В методе onClick вы проверите id чтобы увидеть, является ли он существующим элементом или новым элементом. Измените метод onClick как показано:
|
1
2
3
|
if(this.task.id == 0){
this.tasks.push({id: (new Date()).getTime(),name: this.task.name});
}
|
Как видно, вы назначили уникальную метку времени в качестве id для каждой задачи Теперь давайте определим метод onEdit для редактирования существующего элемента. Внутри метода onEdit присвойте переданный item переменной task .
|
1
2
3
|
onEdit(item){
this.task = item;
}
|
Сохраните изменения и перезапустите сервер. Введите новый элемент в список покупок и нажмите соответствующую кнопку редактирования. Вы сможете редактировать и обновлять запись, нажав кнопку OK .
Удаление продуктов
Давайте добавим значок удаления, чтобы удалить существующие элементы. Обновите файл app.grocery.html чтобы изменить код HTML, как показано ниже:
|
1
|
<span class=»glyphicon glyphicon-remove floatright paddingLeft»>
|
Вот как выглядит полный файл app.grocery.html :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<div>
<h2> Grocery list manager </h2>
<div class=»row»>
<div class=»col-xs-6 col-md-4″>
<div class=»input-group»>
<input type=»text» class=»form-control» placeholder=»enter grocery items» [(ngModel)]=»task.name» />
<div class=»input-group-btn»>
<button class=»btn btn-primary» type=»button» (click)=»onClick()»>
<span class=»glyphicon glyphicon-ok»>
</button
>
</div>
</div>
<ul class=»list-group»>
<li *ngFor=»let task of tasks» class=»list-group-item»>
<span> {{ task.name }}
<span class=»glyphicon glyphicon-remove floatright paddingLeft»>
<span (click)=»onEdit(task)» class=»glyphicon glyphicon-pencil floatright»>
</li>
</ul>
</div>
</div>
</div>
|
Добавьте событие нажатия на значок удаления, чтобы удалить продуктовый элемент.
|
1
|
<span (click)=»onDelete(task)» class=»glyphicon glyphicon-remove floatright paddingLeft»>
|
Сохраните изменения и перезапустите сервер. Попробуйте добавить новые элементы в приложение бакалейного менеджера, и вы увидите список элементов вместе со значками удаления и редактирования.
Для реализации функции удаления необходимо добавить метод app.grocery.ts файл app.grocery.ts как показано ниже:
|
1
2
3
|
onDelete(item){
// Delete functionality will be here
}
|
После того, как пользователь щелкнет значок удаления, необходимо сравнить id элемента со списком продуктовых элементов и удалить запись из списка tasks . Вот как onDelete метод onDelete :
|
1
2
3
4
5
6
7
8
|
onDelete(item){
for(var i = 0;i < this.tasks.length; i++){
if(item.id == this.tasks[i].id){
this.tasks.splice(i,1);
break;
}
}
}
|
Как видно из приведенного выше кода, вы перебрали список tasks и проверили его по id элемента, по id щелкнули. Если он соответствует элементу в списке tasks , он удаляется методом splice .
Сохраните вышеуказанные изменения и перезагрузите сервер. Добавьте несколько предметов в менеджер списка покупок. Он будет добавлен с иконками удаления и редактирования в сетку списка задач. Попробуйте нажать на значок удаления, и элемент будет удален из списка элементов.
Маркировка продуктового товара как выполненного
Давайте добавим функциональность, чтобы вычеркнуть элементы, добавленные в список. Когда пользователь выполнит задачи в менеджере списка покупок, появится возможность вычеркнуть выполненные задачи. Чтобы отслеживать новые и выполненные задачи, добавьте новую переменную strike в информацию о задаче.
Измените метод onClick чтобы включить новую переменную strike как показано ниже:
|
01
02
03
04
05
06
07
08
09
10
|
onClick(){
if(this.task.id == 0){
this.tasks.push({id: (new Date()).getTime(),name: this.task.name, strike: false});
}
this.task = {
name: »,
id: 0
};
}
|
Добавьте новый класс strike в файл src/style.css который src/style.css элемент.
|
1
2
3
|
.strike{
text-decoration:line-through;
}
|
Включите событие нажатия на элемент, чтобы переключить переменную strike переменной items. Вы будете применять класс strike к предметам на основе логического значения переменной strike . По умолчанию это будет false. Вот метод onStrike для переключения значения переменных удара:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
onStrike(item){
for(var i = 0;i < this.tasks.length; i++){
if(item.id == this.tasks[i].id){
if(this.tasks[i].strike){
this.tasks[i].strike = false;
}
else{
this.tasks[i].strike = true;
}
break;
}
}
}
|
Как видно из приведенного выше метода, вы перебираете список элементов. Как только предмет найден, вы переключаете значение удара.
Основываясь на переменной strike , вам нужно применить класс strike к диапазону имен задач. Вот как это выглядит:
|
1
|
<span (click)=»onStrike(task)» [ngClass]=»{‘strike’: task.strike}»> {{ task.name }}
|
Как видно, вы использовали директиву ngClass для применения strike класса к элементу span, если значение task.strike равно true .
Сохраните вышеуказанные изменения и перезагрузите сервер. Добавьте элементы в список и нажмите на добавленный элемент. После щелчка элемент будет вычеркнут, как и ожидалось.
Завершение
В этом руководстве вы увидели, как обновить, удалить и пометить задачу как выполненную в приложении управления продуктами с помощью Angular. Я надеюсь, вам понравился урок. Дайте мне знать ваши мысли в комментариях ниже.
JavaScript стал одним из де-факто языков работы в сети. Это не без кривых обучения, и есть множество фреймворков и библиотек, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato .
О, и не забывайте, что исходный код из этого урока доступен на GitHub .