учебные пособия

AngularJS - Управление многократными элементами

  Дата публикации: May/2024
{title}

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

Списки, таблицы и другие повторяющиеся элементы


AngularJS не усложняет нашу жизнь, просто если мы хотим использовать или создать список, мы должны использовать ng-repeat, который создает элемент для каждого элемента, содержащегося в списке, с этим мы можем передать список продуктов и легко сгенерировать таблицу.
Скажем, мы создаем список учащихся для школы, ключ в том, чтобы сгенерировать список, обычно мы получаем его из веб-службы, которая обращается к базе данных, но для упрощения мы создадим список сами, затем мы вызовем этот список в нашем $ область действия, чтобы иметь возможность использовать его, с этим в HTML мы можем включить инструкцию ng-repeat, которую мы упомянули, давайте посмотрим следующий код: 
 var студенты = [{name: 'María Rojo', id: '1'}, {name: 'Manolo Rodriguez', id: '2'}, {name: 'Joao Pinto', id: '3'}]; function StudentListController ($ scope) {$ scope.students = Students; }

Здесь мы определили список студентов, а затем мы определяем контроллер, с помощью которого мы передаем этот список в область $ контроллера, теперь мы должны написать HTML- код: 
  •  {{}} Estudiante.nombre

Здесь мы видим, что мы определяем наш список как контроллер AngularJS, и благодаря тому, что $ scope этого контроллера позволяет нам получить доступ к списку студентов, мы используем ng-repeat, сообщая вам, что вы создадите студента для каждого элемента списка студентов и, наконец, в
  • Мы создаем привязку, которая переносит нас в другое место в приложении. Давайте посмотрим на следующее изображение того, как это выглядит в нашем браузере:

    {title}


    Функция Splice ()

    Еще одна вещь, которую мы можем сделать, это включить новые элементы в список, для этого у нас есть функция splice (), если мы включим ее, например, в кнопку, добавляющую новых студентов, мы автоматически увидим изменение, благодаря AngularJS, который дает нам Нажмите обновление документа в режиме реального времени без перезагрузки страницы.
    Давайте посмотрим в следующем коде, как контроллер будет добавлен для студента: 

     var студенты = [{name: 'María Rojo', id: '1'}, {name: 'Manolo Rodriguez', id: '2'}, {name: 'Joao Pinto', id: '3'}]; function StudentListController ($ scope) {$ scope.students = Students; $ scope.agregarNew = function () {$ scope.estudiantes.splice (1, 0, {name: 'Joaquin Fernandez', id: '4'}); }; }

    Теперь мы должны просто вызвать новую функцию в нашем HTML, мы можем сделать это следующим образом: 
    •  {{}} Estudiante.nombre
    вставить

    Давайте посмотрим, как это выглядит в нашем браузере:

    {title}


    Мы видим, как мы добавили нового студента в список, однако каждый раз, когда мы нажимаем на кнопку, мы добавляем одного и того же человека, это потому, что мы не создали динамический код, но это другой вопрос, который мы должны выделить, это что мы должны были добавить

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

    • 0

    • СТАТЬЯ ПО ТЕМЕ Лучшие публичные DNS-серверы бесплатный интернет