Многие из нас сталкивались с целым рядом приложений для заметок, которые помогают нам записывать нашу повседневную деятельность или связанные с работой элементы. Вы когда-нибудь задумывались, что делает эти приложения популярными?
Многие пользователи в настоящее время используют приложения для создания заметок из-за функций в приложениях, таких как связывание разных заметок вместе, чтобы избежать дублирования данных. Еще одна замечательная функция заключается в том, что приложения для создания заметок будут автоматически проверять все наши предыдущие заметки, чтобы узнать, сделали ли мы уже какие-либо связанные заметки. Все эти функции помогают пользователю сохранять несколько заметок или документов в отсортированном виде.
Теперь , двунаправленное связывание является одной из функций этих приложений для создания заметок, которая позволяет нам объединять отдельные заметки в одну категорию. Это позволяет пользователю легко проверить категорию, и все примечания, связанные с ней, будут отображаться.
В этом руководстве давайте узнаем, как создать простую двунаправленную ссылку для проекта 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 и помогает поддерживать конфиденциальность и анонимность, что позволяет проводить эффективные опросы и опросы. Попробуйте создать свои опросы и опросы вместе с нами.