Редактирование одного или всех выбранных пользователей в таблице с помощью флажков - AngularJS - PullRequest
0 голосов
/ 30 апреля 2018

Я загружаю 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>

1 Ответ

0 голосов
/ 30 апреля 2018

Вам нужна переменная show для каждого 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, оно будет рассматриваться как ложное, и строка будет отображаться в состоянии без редактирования.

Затем в вашем контроллере убедитесь, что вы устанавливаете индивидуальную переменную show:

$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>

Теперь в вашем контроллере вам нужно будет поработать, чтобы установить переменную show только для элементов в списке, где selected имеет значение true:

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

Если вы не распознаете этот шаблон фильтрации, обязательно прочитайте документацию Array на веб-сайте документации MDN .

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