Question

我目前正在使用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;
        });

因此此代码有效，但是我的清单将来会很大，因此，寻找合适的元素然后寻找合适的子元素可能会很慢。

有没有一种方法可以在不使用forEach的情况下更新child.linked的值？我知道我可以切换值：

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

但是后来我想做的是：

单击按钮（调用函数）
发出HTTP POST请求以更新数据库
获取child.linked的新值（当然应该是！child.linked，但是从数据库中获取它是“安全的”）
然后更新列表中的子元素以更新视图

如果您有任何想法，我将不胜感激，如果您需要澄清，我随时为您服务。

先谢谢您

AngularJS更新列表的子元素

0 个答案: