AngularJS Установите / снимите все флажки из массива объектов ng-repeat - PullRequest
Новая
       12

AngularJS Установите / снимите все флажки из массива объектов ng-repeat

0 голосов
/ 04 апреля 2019

Пример Fiddle

У меня есть таблица, в которой каждая строка имеет флажок и еще один флажок для проверки всех строк (флажки) и отправки идентификатора выбранной / всех строк) как объект JSON.

У меня есть массив объектов из ответа (GET) (разбиение на страницы на стороне сервера включено), и он хранится в itemsList $ scope.

Ниже приведен мой код.

Вид 

<table class="table">
    <thead>
        <tr>
            <th><input type="checkbox" ng-model="allItemsSelected ng-change="selectAll()"></th>
            <th>Date</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in itemsList track by $index" ng-class="{selected: item.isChecked}">
            <td>
                <input type="checkbox" ng-model="item.isChecked" ng-change="selectItem(item)">
            </td>
            <td>{{item.date | date:'dd-MM-yyyy'}}</td>
            <td>{{item.id}}</td>
        </tr>
    </tbody>
</table>

Контроллер 

$scope.itemsList = [
    {
        id : 1,
        date : '2019-04-04T07:50:56'
    },
    {
        id : 2,
        date : '2019-04-04T07:50:56'
    },
    {
        id : 3,
        date : '2019-04-04T07:50:56'
    }
];
$scope.allItemsSelected = false;
$scope.selectedItems = [];

// This executes when entity in table is checked
$scope.selectItem = function (item) {

    // If any entity is not checked, then uncheck the "allItemsSelected" checkbox
    for (var i = 0; i < $scope.itemsList.length; i++) {
        if (!this.isChecked) {
            $scope.allItemsSelected = false;
            // $scope.selectedItems.push($scope.itemsList[i].id);
            $scope.selectedItems.push(item.id);
            return
        }
    }

    //If not the check the "allItemsSelected" checkbox
    $scope.allItemsSelected = true;

};

// This executes when checkbox in table header is checked
$scope.selectAll = function() {

    // Loop through all the entities and set their isChecked property
    for (var i = 0; i < $scope.itemsList.length; i++) {
        $scope.itemsList[i].isChecked = $scope.allItemsSelected;

        $scope.selectedItems.push($scope.itemsList[i].id);
    }

};

Ниже приведеныпроблемы, с которыми я сталкиваюсь ...

  • Если вы проверите пример скрипта, то вы увидите, что в checkAll () массив обновляется со всем доступным списком.Но если снова щелкнуть checkAll () вместо удаления списка из массива, он снова добавит еще одну строку в тот же массив объектов.
  • Также я хочу сделать то же самое (добавить / удалить из массива), еслиустановите флажок в любой строке
  • Если я установил все флажки вручную, флажок thead также должен быть установлен.

Ответы [ 2 ]

0 голосов
/ 16 апреля 2019

Это поможет вам при одном из двух сомнений: 

$scope.selectAll = function() {
    if($scope.allItemsSelected){
        for (var i = 0; i < $scope.itemsList.length; i++) {
            $scope.itemsList[i].isChecked = $scope.allItemsSelected;
            $scope.selectedItems.push($scope.itemsList[i].id);
        }
    }else{
        for (var i = 0; i < $scope.itemsList.length; i++) {
            scope.itemsList[i].isChecked = $scope.allItemsSelected;
        }
        $scope.selectedItems = [];
    }
};

Я ищу что-то, чтобы достичь решения по пункту 2. Можно проверить ng , но этоне рекомендуется использовать проверенный нг с нг-моделью .

0 голосов
/ 13 апреля 2019

Я думаю, что вы на правильном пути.Я не считаю хорошей идеей иметь массив только для выбранных элементов, вместо этого вы можете использовать свойство isSelected элементов.Вот рабочая скрипка: http://jsfiddle.net/MSclavi/95zvm8yc/2/.

Если вам нужно отправить выбранные элементы в бэкэнд, вы можете отфильтровать элементы, если они отмечены с помощью 

var selectedItems = $scope.itemsList.filter(function (item) {
    return !item.isChecked;
});

Надеюсь, это поможет

...