使用复选框编辑表中的单个或所有选定用户 - AngularJS答案

【问题标题】：Editing single or all selected users in a table with checkboxes - AngularJS使用复选框编辑表中的单个或所有选定用户 - AngularJS
【发布时间】：2018-10-10 18:08:09
【问题描述】：

我正在将 JSON 加载到表中。我希望我的“编辑”按钮编辑一行，而我的“编辑选择”只编辑那些被选中的行，但我无法弄清楚。我只设法让它一次编辑所有行。

example.json

{
    "example": [
        {
            "first": "something1",
            "second": "one"
        },
        {
            "first": "something2",
            "second": "two"
        },
        {
            "first": "something3",
            "second": "three"
        },
        {
            "first": "something4",
            "second": "four"
        }
    ]
}

index.htm

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<body>

    <div ng-app="newApp" ng-controller="newCtrl">
        <h1>
            <button ng-click="showFunc()">Edit selected</button>
        </h1>

        <table>
            <tr>
                <th></th>
                <th>Index</th>
                <th>First </th>
                <th>Second</th>
                <th>Edit</th>
            </tr>
            <tr ng-repeat="iterator in newData.example" ng-show="show">
                <td>
                    <input type="checkbox" />
                </td>
                <td>{{$index + 1}}</td>
                <td>
                    <input ng-model="iterator.first">
                </td>
                <td>
                    <input ng-model="iterator.second">
                </td>
                <td>
                    <button ng-click="showFunc()">Save</button>
                </td>
            </tr>

            <tr ng-repeat="iterator in newData.example" ng-show="!show">
                <td>
                    <input type="checkbox" />
                </td>
                <td>{{$index + 1}}</td>
                <td>{{iterator.first}}</td>
                <td>{{iterator.second}}</td>
                <td>
                    <button ng-click="showFunc()">Edit</button>
                </td>
            </tr>
        </table>



        <script>
            var app = angular.module('newApp', []);
            app.controller('newCtrl', function ($scope, $http) {
                $http.get("example.json")
                    .then(function (response) {
                        $scope.newData = response.data;
                    });
                $scope.show = false;
                $scope.showFunc = function (index) {
                    $scope.show = !$scope.show;
                }

            });
        </script>

</body>
</html>

【问题讨论】：

请在问题中包含您的代码，而不是在外部网站上。
它不会让我造成“太长”，这就是我使用 pastebin 的原因
嗯。我尝试对其进行编辑，效果很好。
谢谢，我不知道为什么，但它不会让我发布整件事

标签： angularjs checkbox html-table edit

【解决方案1】：

每个iterator 都需要一个显示变量。正如现在编码的那样，您有一个单独的变量来控制所有行的视图状态。这合乎逻辑吗？没有。

为每一行获取show 变量的最简单方法是在迭代器本身上创建对它的引用：

<tr ng-repeat="iterator in newData.example" ng-show="iterator.show">
  ...
    <td>
      <button ng-click="showFunc(iterator)">Save</button>
    </td>
</tr>

 <tr ng-repeat="iterator in newData.example" ng-show="!iterator.show">
    ...
    <td>
      <button ng-click="showFunc(iterator)">Edit</button>
     </td>
  </tr>

由于它最初是undefined，因此将被视为虚假，并且该行将显示为非编辑状态。

然后在你的控制器中确保你设置了单独的显示变量：

$scope.showFunc = function (iterator) {
  iterator.show = !iterator.show;
}

要选择多行，请遵循相同的模式。通过在您的复选框中引用它来添加 selected 属性：

<input type="checkbox" ng-model="iterator.selected"/>

iterator.selected 将在您每次单击复选框时自动更新。

现在，我假设您的页面某处有一个全局 Edit Selected 按钮：

<button type="button" ng-click="editSelected()">Edit Selected</button>

现在在您的控制器中，您将不得不做一些工作来仅在列表中selected 为真的项目上设置show 变量：

$scope.editSelected() = function() {
  $scope.newData.example.filter(function(iterator) {
    return iterator.selected;
  }).forEach(function(item) {
    item.show = true;
  });
}

如果您不认识这种过滤模式，请务必阅读Array docs on MDN documentation website。

【讨论】：

对，所以我对每一行都有一个迭代器。但它只是在表格中，我在控制器中看不到它，可以吗？它不适用于我以前的 $scope.show 作为 iterator.show
您将迭代器作为参数传递给您的showFunc。这就是您可以访问它的方式。每次单击“保存”或“编辑”按钮时，都会将该单个迭代器传递给 showFunc 以更改其状态
我明白了！谢谢，现在我可以编辑单行了。但它仍然不适用于选择多行，即检查 2 和 3 并编辑它们。你能指出我正确的方向吗？