Problem with checkbox in selection

Question

I’m using a checkbox in a table with Anglijs that is working incorrectly, there are 2 checkbox what is on top of the table (to select all), and the one of each row. When selecting the one for each line, I call a function that adds the object to the object list, if I uncheck I remove. If I select the checkboxMaster it selects everything, and my list of selections equals the entire list, if I deselect the list zero.So far all beauty, the prolema is that if I select all of them by selecting the top cb, and try to deselect some , it is destroying the table row.This problem only happens if I have selected them all before.

Look at the code:

//Adiciona um obj a lista a cada seleção de checkbox
function addListaAdicionar(elemento){


        if(vm.listaAdicionar.indexOf(elemento) == -1){
            vm.obj = {
                    codigo : elemento.codigo,
                    descricao: elemento.descricao,
                };
                vm.listaAdicionar.push(elemento);
        }
        else{
                //Remove o elemento da lista se desmarcar
              vm.listaPoderAdicionar.splice(vm.listaPoderAdicionar.indexOf(elemento) , 1);

        }       

    }

    //Função para seleção de todos os  checkBox
     function selecionarTudo() {
            if(vm.selecionaTudo) {
                vm.selecionaTudo = false;
            } else {
                vm.selecionaTudo = true;
            }

            angular.forEach(vm.listaObj, function (obj) {
                obj.selecionado = vm.selecionaTudo;
            });
            //se desmarcar o cbTodos zera a lista
            if(vm.selecionaTudo == false)
            vm.listaAdicionar = [];
            else
                vm.listaAdicionar = vm.listaObj;


        }

HTML:

<table id="tableExport" class="tableScrollable table genericTable table-striped tbPadrao" st-table="vm.listaObj" st-safe-src="vm.listaObjOrdenavel" style="width: 100%">
        <thead>
            <tr>
                <th  width="20px">
                    <input type="checkbox" data-ng-model = "vm.selecionaTudo" id="cbMaster"
data-ng-click = "vm.selecionarTudo()"> 
                </th>

                <th class="st-sort-default" st-sort="codigo" width="75px">
                    Código
                </th>
                <th class="st-sort-default" st-sort="descricao" >
                    Descricao
                </th>

            </tr>
            <tr>

            <th></th>
                <th>
                    <input  style="width: 100%;" type="text" st-search="codigo" />
                </th>
                <th>
                    <input type="text" style="width: 100%;" st-search="descricao" />
                </th>

            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="obj in vm.listaObj">
                <td text-align: right;"> <input type="checkbox" name="cbRow" data-ng-model = "obj.selecionado"  data-ng-click="vm.addPoderListaAdicionar(obj );"></td>
                <td text-align: right;">{{obj .codigo}}</td>
                <td text-align: left;">{{obj .descricao}}</td>

            </tr>
        </tbody>
    </table>
</div>

The problem is only when I select All of you and try to clear one, instead of just one of you splice into the list, it’s destroying the table row together.

Answer 1

You could change your logic to this:

HTML:

<tr data-ng-repeat="obj in vm.listaObj">
   <td> <input type="checkbox" name="cbRow" data-ng-model =  "obj.selecionado"  data-ng-click="vm.addPoderListaAdicionar($index);"></td>
   <td>{{obj.codigo}}</td>
   <td>{{obj.descricao}}</td>
</tr>

Javascript/Angular:

$scope.addPoderListaAdicionar = function(index){
    vm.listaObj[index].selecionado = !vm.listaObj[index].selecionado;
}

$scope.selecionarTudo = function(){
   angular.forEach(vm.listaObj, function (obj) {
            obj.selecionado = vm.selecionaTudo;
   });
}