Send an array of objects in an ng-click?

Asked

Viewed 544 times

1

I have the following doubt in this code. 

<table class="table table-bordered table-hover">
        <thead>
            <tr class="bg-info table-responsive table-bordered table-striped">
                <th>Cpf</th>
                <th>Nome</th>
                <th>Marque</th>
            </tr>
        </thead>
        <tbody ng-repeat="list in listaDeAlunos" >
            <tr>
                <td>{{list.cpf}}</td>
                <td>{{list.nome}}</td>
                <td><input type="checkbox" value="{{list.cpf}}"></td>
            </tr>
        </tbody>
    </table>

I want to save in an array in the controller by ng-click all the students (all their data) selected by the checkbox, who are in this table. Is that possible ?

angularjs json

2 answers

1


You can use ng-model to directly map the status assessment of a checkbox. Functional example below, click on Execute:

var myApp = angular.module("myApp", [])
    .controller("testController", function ($scope) {
    
    $scope.marcados = {};

        $scope.listaDeAlunos = [
            { cpf:'111', nome: 'Aaa' },
            { cpf:'222', nome: 'Bbb' },
            { cpf:'333', nome: 'Ccc' },
            { cpf:'444', nome: 'Ddd' },
        ];
        
    $scope.$watch('marcados', function(){
    
      angular.forEach($scope.marcados, function(v,k) {
        if (!v) delete $scope.marcados[k];
      });
    
    }, true);
        
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <body ng-app='myApp' ng-controller="testController">
    
    <table  class="table table-bordered table-hover">
        <thead>
            <tr class="bg-info table-responsive table-bordered table-striped">
                <th>Cpf</th>
                <th>Nome</th>
                <th>Marque</th>
            </tr>
        </thead>
        <tbody ng-repeat="list in listaDeAlunos" >
            <tr>
                <td>{{list.cpf}}</td>
                <td>{{list.nome}}</td>
                <td><input type="checkbox" ng-model="marcados[list.cpf]" ng-true-value="{{list}}", ng-false-value="null"></td>
            </tr>
        </tbody>
    </table>

<pre>{{marcados | json}}</pre>

    </body>

  • Nice guy, and I can also pass the name of the student ? The idea of my project is to send the selected students from the check box to another table. It has an array within the controller, called selected students. And I have a button that would call a function through ng-click ,to send these selected students, into this array of students selected there in the controller function. Would that be possible? Pass the whole object ?

  • Look at the code <tbody ng-repeat="students in listDelunos" > <tr> <td>{{students.Cpf}}</td> <td>{{students.name}}</td> <td><input type="checkbox" ng-model="marked[students]"></td> </tr> </tbody> <li> <button class="btn btn-Primary btn-lg btn-block" data-toggle="tooltip" title="Send selected students to the side table" ng-click="send Students(students)">&#span Xa; <class="glyphicon glyphicon-forward"></span> </button> </li>

  • @Vagnerbellaver I changed the example to preserve the full object.

  • Thank you. I’m going to study the code. forgive me if you seem a little layman. I’m starting at the angular in my Web Page Building classes 4, and I really liked the angular, due to its practicality. That’s why I try to understand the code. In your example you treat checkboxes at runtime. It is possible to pass all within an ng-click directive ?

  • @Vagnerbellaver No problem at all, we’re all newbies at some point! In the above example I am using native Angular behavior to populate the object marcados. However you can pass the reference of the current object to a method via ng-click='metodo(list);', where list is the item in the collection listaDeAlunos.

  • If I select several checkboxes and send the list in ng-click all the objects I selected, will go to the function ? If I understand correctly.

  • @Vagnerbellaver Almost That. If you add ng-click to the checkbox element being repeated, the event will be triggered for each click. At this time you can manage a list.

  • I began to understand. Every checkbox I selected, it would call the function. There in the function, it receives the object and just give an array.push, or would it be necessary to do some checking? As it was here. <td> <input type="checkbox" ng-model="marked[students.Cpf]" ng-true-value="{students}}" ng-false-value="null" ng-click="sent(students)" > </td>

  • @Vagnerbellasee a click may be to disable the check. In this case you need to remove the item.

  • Then there in the function would have to have a checked check ?

  • @VagnerBellaver http://stackoverflow.com/a/20290803/1845714

  • I have achieved my goal @Onosendai. This video was the light at the end of the tunnel https://www.youtube.com/watch?v=ExgtvARcBXE I thank you very much. Of much value was your help. Big hug.

  • @Vagnerbellaver Always a pleasure to help, and I’m glad you made it work!

Show 8 more comments

0

Try it this way:

HTML:

ng-click="guardaObjs(list)"

"Call the function inside the loop"

Controller:

guardaObjs(obj){ //aqui vc manipula o array (obj) }

  • <tbody ng-repeat="list in listDelunos" > <tr> <td>{{list.Cpf}}</td> <td>{{list.name}}</td> <td><input type="checkbox" ng-model="'{{list}}'"></td> </tr> This way he will send only the selected Checkboxes, or will have to put a checked one at some point ?

Browser other questions tagged angularjs json

You are not signed in. Login or sign up in order to post.