AngularJS Обновление подэлемента списка эффективно - PullRequest
0 голосов
/ 05 ноября 2018

В настоящее время я разрабатываю небольшой сайт с использованием AngularJS. У меня есть JSON (сгенерированный с помощью PHP из MySQL), который я загружаю с помощью службы. Используя ng-repeat, я создаю столько таблиц, сколько есть элементов, и для каждой таблицы у меня есть другой ng-repeat для каждого подэлемента для создания строк.

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

Вот пример моего файла JSON:

{
        "id": 13,
        "active": 1,
        "created": "05/09/2018 18:34",
        "timestamp": "08/10/2018 08:52",
        "children": [
          {
            "id": 789,
            "linked": true,
            "ip_address": "192.168.1.20",
            "comm_string": "public",

          },
          {
            "id": 795,
            "linked": false,
            "ip_address": "192.168.1.80",
            "comm_string": "public",

          },..
          ]
},....

Вот HTML:

<table ng-repeat="line in json">
<tbody>
<tr ng-repeat="child in line.children">
// CONTENT...
  <td>
    <button ng-click="toggleLink(line.id, child.id, child.linked)">
      <i ng-class="{'fa fa-link': !child.linked, 'fa fa-unlink': child.linked}"> 
</i>
{child.linked ? "Unlink" : "Link"}}
</button>
  </td>
</tr>
</tbody>
<table>

Вот JS:

$scope.toggleLink = function (group, device, state) {

// Update entry
        $scope.json.forEach(function (v) {
            if (v.id === group) {
                v.children.forEach(function (u) {
                    if (u.id === device) {
                        u.linked = !state;
                        return false;
                    }
                });
            }
            return false;
        });

Так что этот код работает, но мой список в будущем будет очень большим, поэтому поиск правильного элемента и поиск правильного подэлемента могут быть медленными.

Есть ли способ обновить значение child.linked без использования forEach? Я знаю, что я мог бы к тому, чтобы переключить значение:

<button ng-click="child.linked =! child.linked"></button>

Но позже я хочу сделать это:

  • Нажмите на кнопку (вызовите функцию)

  • Сделать HTTP-запрос POST для обновления базы данных

  • Извлечь новое значение child.linked (которое, конечно, должно быть! Child.linked, но "безопаснее" получить его из БД)

  • Затем обновите подэлемент в списке, чтобы обновить представление

Если у вас есть идея, я был бы очень признателен, если вам нужны разъяснения, я в вашем распоряжении.

Заранее благодарю,

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...