在带有复选框的 table 中编辑单个或所有选定用户 - AngularJS

Question

我正在将 JSON 加载到 table。我希望我的 'edit' 按钮编辑单行，而我的 'edit selected' 按钮只编辑那些选中的行，但我无法弄清楚。我只设法让它一次编辑所有行。

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>

Answer 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;
}

至select 多行，您遵循相同的模式。通过在您的复选框中引用它来添加 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。

在带有复选框的 table 中编辑单个或所有选定用户 - AngularJS

Editing single or all selected users in a table with checkboxes - AngularJS

checkbox

html-table

edit

angularjs