Многие из нас сталкивались с целым рядом приложений для заметок, которые помогают нам записывать нашу повседневную деятельность или связанные с работой элементы. Вы когда-нибудь задумывались, что делает эти приложения популярными?

Многие пользователи в настоящее время используют приложения для создания заметок из-за функций в приложениях, таких как связывание разных заметок вместе, чтобы избежать дублирования данных. Еще одна замечательная функция заключается в том, что приложения для создания заметок будут автоматически проверять все наши предыдущие заметки, чтобы узнать, сделали ли мы уже какие-либо связанные заметки. Все эти функции помогают пользователю сохранять несколько заметок или документов в отсортированном виде.

Теперь , двунаправленное связывание является одной из функций этих приложений для создания заметок, которая позволяет нам объединять отдельные заметки в одну категорию. Это позволяет пользователю легко проверить категорию, и все примечания, связанные с ней, будут отображаться.

В этом руководстве давайте узнаем, как создать простую двунаправленную ссылку для проекта Angular Todo.

Примечание. В этом руководстве мы собираемся использовать npm-пакет Нечеткий поиск / Нечеткая сортировка для поиска и отображения результатов. Пользователи могут использовать любой метод поиска, но он должен возвращать результаты быстрее. В этом руководстве мы используем Angular, чтобы реализовать то же самое.

Шаги по созданию простой двунаправленной ссылки для проекта Angular Todo

Полный код и репозиторий для вышеуказанного проекта приведены ниже. Небольшие фрагменты кода приведены ниже, чтобы проиллюстрировать это.

  • Для начала создайте проект Angular и установите модуль npm для нечеткого поиска или нечеткой сортировки (любой из двух).
npm i fuzzy-search
or
npm i fuzzysort
  • Далее нам нужно создать поле для добавления задачи Todo. Для этого следуйте приведенному ниже HTML-коду.
<!-- Input Field for adding Todo -->
<div class="col-lg-12">
<input type="text" class="form-control calculator_textbox (input)="searchAndAddTag()" (keydown)="upDown($event, 'oldTask')"[(ngModel)]="oldTask"/>
</div>
<button (click)="addToOldList()" class="btn button">ADD</button>
  • Затем мы должны написать функцию для добавления задачи в список.
// Adding to Task to Todo List
addToOldList() {
let items = { sentence: this.removeHash, word: this.hashtag };
this.previousItems.push(items);
this.list = this.previousItems;
}

  • Чтобы удалить задачу, мы можем написать функцию для ее удаления из списка. При щелчке значка удаления он отправит индекс функции и удалит ее из списка.
deleteTask(index) {
this.items.splice(index, 1);
this.list = this.items;
}
  • Теперь после добавления задачи в список мы можем добавлять теги вручную, чтобы связать задачу или заметки с определенной категорией.
  • Для этого мы будем использовать «[[]]». Пользователь должен ввести текст между двойными квадратными скобками, чтобы вручную связать его с задачей. Например, Вечером поиграйте в крикет [[спорт]].
  • Затем, чтобы получить содержимое внутри [[]] », нам нужно написать функцию. Ниже приведен код для получения данных.
searchAndAddTag() {
this.hashtag = this.oldTask.substring(this.oldTask.lastIndexOf("[["),this.oldTask.lastIndexOf("]]"));
if (this.hashtag) {
let length = this.hashtag.length;
this.hashtag = this.hashtag.substr(2, length);
}
this.removeHash = this.oldTask.replace("[[" + this.hashtag + "]]", "");
}
  • Теперь мы можем видеть тег, добавленный в список задач вместе с #sports. Когда мы ищем спорт, он показывает все задачи в категории спорт.

  • Помимо динамического связывания и отмены связи с задачами с помощью двунаправленной связи, мы должны выполнять поиск по задачам с помощью нечеткого поиска, который обеспечит более быстрые результаты. Он будет искать по символу за символом, поэтому везде, где присутствует символ, он будет искать слева направо и отображать результаты.
worker() {
let searcher = new FuzzySearch(this.previousItems, ["sentence"], {caseSensitive: false,
sort: true,
});
let results = searcher.search(this.newTask);
this.search(results);
}
search(data) {
this.list = [];
let results = data;
for (let i = 0; i < results.length; i++) {
if (this.list.includes(results[i]["sentence"])) {
} else {
this.list.push(results[i]);
}}
  • Это покажет нам результаты в раскрывающемся списке. Мы будем использовать ngbdropdown для отображения раскрывающегося списка. Обязательно установите его, прежде чем продолжить.

  • Затем мы можем нажать кнопку ввода или поиска, чтобы перейти в раздел двунаправленных ссылок, чтобы связать и отменить связь с задачей.
  • Для этого мы должны написать функцию для отправки нас на новую страницу для связывания и отмены связи задач в соответствии с тегом или категорией, с которой мы хотим связать задачи. На данный момент мы будем ставить теги в соответствии со значением поля поиска.
addToNewList() {
for (let i = 0; i < this.searchList.length; i++) {
if (this.searchList[i].word == "") {
unlinkedTask.push(this.searchList[i]);
} else if (this.searchList[i].word == this.newTask) {
linkedTask.push(this.searchList[i]);
}}
let task = {
task: this.newTask,
linkedList: linkedTask,
unlinkedList: unlinkedTask,
};
this.newTaskObject.push(task);
this.data.changeMessage(this.newTaskObject);
this.router.navigate(["task/" + this.newTaskName]);
}

  • Чтобы связать задачи с категорией и отменить связь с ними, необходимо выполнить следующие действия.
linkNotes(value, task) {
for (let i = 0; i < this.searchList.length; i++) {
if (this.searchList[i].sentence == value.sentence) {
this.searchList[i].word = task;
}}
this.addToNewList(this.searchList, this.newTaskName);
}

unlinkNotes(value) {
for (let i = 0; i < this.searchList.length; i++) {
if (this.searchList[i].sentence == value.sentence) {
this.searchList[i].word = "";
}}
this.addToNewList(this.searchList, this.newTaskName);
}
  • Теперь после связывания и отмены связывания задач он будет запрашивать сохранение объекта. Затем нажмите «Сохранить», чтобы сохранить список задач с примененной категорией.

  • Затем мы можем видеть, что теги были применены к конкретным задачам.

  • Теперь мы можем искать по тегам или категориям, чтобы собрать необходимые задачи. Для поиска нам понадобится функция, которую можно найти ниже.
searchHashtag(value) {
this.tagList = [];
for (let j = 0; j < this.previousItems.length; j++) {
if (
this.previousItems[j].word.toLowerCase().includes(value.toLowerCase())){
if (this.tagList.includes(this.previousItems[j].sentence)) {
} else {
this.tagList.push(this.previousItems[j].sentence);
}}}}

Мы успешно связали задачи с игровой категорией. Это поможет нам легко найти задачи в категории играть. Обратитесь к ссылке на репозиторий Github, чтобы просмотреть полный исходный код.

Резюме

Используя двунаправленное связывание, разные заметки можно объединить в одну группу. Это позволяет пользователю легко проверить категорию, и все примечания, связанные с ней, будут отображаться. Это, в свою очередь, помогает пользователю легко создавать заметки, а также предотвращает проблемы с избыточностью данных.

Спасибо, что прочитали руководство. Просим вас поделиться своими мыслями в комментариях ниже!

использованная литература

О Blocksurvey

BlockSurvey - это платформа, ориентированная на конфиденциальность, для создания опросов, опросов и форм с полной конфиденциальностью. Благодаря BlockSurvey все ваши данные зашифрованы от начала до конца, и только вы можете их увидеть. Вы владеете своими данными. Это ваше цифровое право. Здесь нет трекеров, и мы сохраняем вашу анонимность для сборщиков данных. Наша платформа использует Blockstack и помогает поддерживать конфиденциальность и анонимность, что позволяет проводить эффективные опросы и опросы. Попробуйте создать свои опросы и опросы вместе с нами.