0

I have loaded a JSON list into a table and I would like to parse 1 JSON result or multiple results into an object, so I can send it to the server.

My table looks like this so far:

HTML

<tr ng-repeat="t in student">
    <td ng-model="herkanserNaam">{{ t.Name }}</td>
    <td>{{ t.City }}</td>
    <td>
        <div class="checkbox" ng-click="laatzien(herkanserNaam, herkanserCheck)" ng-model="herkanserCheck">
            <label>
                <input type="checkbox">
            </label>
        </div>
    </td>
</tr>

Controller

$scope.laatzien = function(name, active) {  

    var herkanser = [{
    "name" :  name,
    "active" : false
    }];
    console.log(herkanser);

}

How would I be able to check one or multiple results and save the data(t.Name) into an object by using a checkbox? So far the function laatzien() is returning the empty values defined in herkanser.

Improve this question
1
  • I don't think a td can have an ngModel.... Pass in t.name to your function and remove that ngModel Commented Nov 23, 2015 at 16:34

3 Answers 3

Reset to default
1

The reason your laatzien method is failing is due to how you are using your directives. Let's work with the example you provided to get your laatzien method to fire.

HTML

<tr ng-repeat="student in students">
    <td>{{ student.Name }}</td>
    <td>{{ student.City }}</td>
    <td>van</td>
    <td>Huis</td>
    <td>[email protected]</td>
    <td>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="student.isActive" ng-change="laatzien(student)">
            </label>
        </div>
    </td>
</tr>

Javascript

$scope.laatzien = function (student) {
    var herkanser = [{
        "name": student.name,
        "active": student.isActive
    }];
    console.log(herkanser);
}

I have made some opinionated changes in your example for readability purposes, others were needed to get the directives to fire as expected. Below are the changes to your snippets.

  1. Renamed the student array to students. This will require a change in your controller from $scope.student to $scope.students.
  2. Renamed the t object to student.
  3. Removed the ng-click directive from your div.
  4. Added an ng-change directive on your checkbox. Now when you click the checkbox your laatzien method should fire.
  5. Added an isActive property to your student. Inside of your laatzien method, you may now check the state of the checkbox. If the checkbox is checked, student.isActive = true. If the checkbox is not checked, student.isActive = false.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

From your code, you seem to want to build the "list of checked students" and send that to the server. In other words, what you want, is to allow the user to check on multiple students and at the end collect everything that was checked and send it over to the server.

If that's the case then your strategy to put an ng-click over the checkbox is wrong.

What you need is to bind your checkbox to your $scope model. Such as this: 

<input type="checkbox" ng-model="t.isChecked" ng-true-value="true" ng-false-value="false'">

When the user checks the checkbox for a student. Your model will automatically be updated.

To collect the data to send over the server you need to put an ng-click on a submit button. In the event handler, simply loop through every student in your $scope "students" model and only save the ones that have isChecked property to true to be sent over to the server.

Hope this helps!

Improve this answer

Comments

0

You could make a function to push thet item into an obj like so...

$scope.students = [
    {
        "name":"John",
        "city":"Boston"
    },
    {
        "name":"Amy",
        "city":"Dallas"
    }
    ]

$scope.activeObj = [];

$scope.laatzien = function(obj) {  
    if($.inArray(obj, $scope.activeObj) == -1) {
        $scope.activeObj.push(obj); 
    } else {
        var index = $scope.activeObj.indexOf(obj);
        $scope.activeObj.splice(index, 1);
    }
}

http://jsfiddle.net/5fcnazb2/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.