Как добавить ручную ячейку в каждую строку таблицы после ng-повторения? - PullRequest
Новая
       16

Как добавить ручную ячейку в каждую строку таблицы после ng-повторения?

0 голосов
/ 07 июня 2018

Я строю таблицу, которая заполняется с помощью ng-repeat, просматривая список из базы данных.Эта часть работает нормально, но я хочу иметь флажок, который позволяет пользователю выбирать, какие строки будут удалены.Я также хотел бы иметь флажок в заголовке таблицы, который работает как кнопка выбора всех.

Проблема в том, что, насколько я понимаю, цикл ng-repeat включает в себя все внутри рассматриваемой строки, оставляяя не могу вставить ручную ячейку между циклом и концом строки.

Есть ли способ добавить дополнительную ячейку между циклом и концом строки, например, используя ng-repeat-start и ng-repeat end?

Вот примериз моих попыток.Это не сработало, очевидно. 

<table>
    <tr><th ng-repeat=" e in poistoavaimet">{{e}}</th></tr>
    <tr ng-repeat="i in poistolista | filter:sukunimiVal | filter:etunimiVal">
        <td ng-repeat-start=" key in poistoavaimet">{{i[key]}}</td>
        <td ng-repeat-end>
            <input type="checkbox" ng-model="poistovalinta.{{$index}}"> 
          {{$index}}</input>
        </td>
    </tr>
</table>

poistoavaimet содержит извлеченные ключи из массива.Poistolista - это сам массив, из которого извлекаются ключи, и он содержит данные из базы данных.Poistovalinta является переменной для значений флажков.poistovalinta.{{$index}} была попытка создать запись в poistovalinta -array с ключом индекса строки.

Я добавлю фрагмент кода, отвечающего за обработку этих переменных из контроллера: 

    $scope.haePoistettavat = function(){
            $http.get('/opiskelijahaku', {params: {'optio':2}})
              .then(function(res){
                    $scope.poistolista = res.data.message;
                    $scope.poistoavaimet = Object.keys($scope.poistolista[0]);
                    $scope.adminLista = {};
                    $scope.adminLista['poisto'] = true;
            }, function(error){
                    console.log(error)
            });
    }

Эта функция отправляет http-запрос на сервер с параметром, который указывает серверу вернуть правильный список.Ответ сохраняется в $scope.poistolista, а ключи извлекаются в массив $scope.poistoavaimet.$scope.adminLista содержит значения true / false, которые ссылаются на ng-show в нескольких объектах.Идея состоит в том, чтобы показать только один из них в то время.Это напрямую не связано с вопросом.

1 Ответ

0 голосов
/ 08 июня 2018

Спасибо @RaphaMex за разъяснение моего недопонимания о том, как работает ng-repeat!

Решение - именно то, что он сказал.Просто добавьте ячейку после повтора, и она заработает.

Вот исправленная версия: 

            <table>
                    <tr><th ng-repeat=" e in poistoavaimet">{{e}}</th><th><input id="kaikki" type="checkbox" ng-model="kaikkiVal"></th></tr>
                    <tr ng-repeat="i in poistolista | filter:sukunimiVal | filter:etunimiVal">
                            <td ng-repeat=" key in poistoavaimet">{{i[key]}}</td>
                            <td><input type="checkbox" ng-model="poistovalinta"></td>
                    </tr>
            </table>
...