binding data in ng-repeat angularjs

Question

*This is my html file where i want to repeat chapters which is a array that looks like My code gives binds the selected checked boxes only (Index values) to true. But i need the entire list of chapters and their i.d's to be retrieved on submit. Cannot figure out how to iterate it on nested loops *

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<span ng-repeat="chapter in chapters">
                
               <label><input type="checkbox" name="checkbox" value="{{chapter}} ng-model="escConfigForm.chapters[$index]" >{{chapter.name}}</label><br>
                
                    
</span>
<input type="submit" id="save" value="Save" />

$scope.chapters = chapterService.getChapters($scope.isbn);
$scope.submit = function(escConfigForm) {

        var postData = {
            content_items: JSON.stringify({
                "@context" : [],
                "@graph" : [ {
                    "@type" : "ContentItemPlacement",
                    "placementOf" : {
                        "@type" : "LtiLink",
                        "text" : escConfigForm.examName,
                        "mediaType" : "application/vnd.ims.lti.v1.launch+json",
                        "title" : "Exam Study Center",
                        "custom" : {
                            "dueDate" : escConfigForm.examDueDate,
                            "targetScore" : escConfigForm.examTargetScore,
                            "chapters" : escConfigForm.chapters
                        },
                        "activityType" : "other",
                        "activityRefId" : $scope.escId
                    }
                } ]
            }),
            data: $scope.data
        };

        postForm($scope.postUrl, postData);         

        var configData = {
            "activityRefId" : $scope.escId,
            "dueDate" : escConfigForm.examDueDate,
            "targetScore" : escConfigForm.examTargetScore,
            "chapters" : escConfigForm.chapters
        };
        console.log($scope.chapters);

JSON file:

[{"name":"Chapter 1: Negative Messages","id":"832115"},{"name":"Chapter 2: Physics","id":"832115"},...]

Yes, the label consists of the checkbox list of all the chapters. When i check and submit them, i need to send back the list of selected chapters along with thier id's to the back-end. — Jas1234, Sep 30 '14 at 16:48
is this a good fiddle for your Q? http://jsfiddle.net/ruwk5r0v/ — stevethecollier, Sep 30 '14 at 16:51
@Jedininjaster Yes. But can you show me a nested loop if you have an id along with the name. so that i need to show only names to be checked. But i need to send back both the name and id's if the particular chapter is selected. — Jas1234, Sep 30 '14 at 16:55

score 1 · Answer 1 · edited May 23 '17 at 12:21

I would recommend maintaining a list of the selected objects in the controller.

using this post as referenece: How do I bind to list of checkbox values with AngularJS?

I created this fiddle: http://jsfiddle.net/ruwk5r0v/7/

<div ng-app="formExample">
<div ng-controller="ExampleController"> <span ng-repeat="chapter in chapters" ng-click="checkboxChange($index)" ng-checked="selection.indexOf($scope.chapters[$index]) > -1">                
        <input type="checkbox" name="checkbox" value="{{$index}}" />
        {{chapter.name}}
        <br>
    </span>

    <br>
    <input type="submit" ng-click="submitForm()" id="save" value="Save" />


<div> <span ng-repeat="chapter in selection">                    
        <span>
            {{chapter.name}}

        </span>
    <br>
</div>

and the js:

angular.module('formExample', []).controller('ExampleController', ['$scope', function ($scope) {

$scope.chapters = [{
    "name": "Chapter 1: Negative Messages",
    "id": "832115"
}, {
    "name": "Chapter 2: Physics",
    "id": "832115"
}];

$scope.submitForm = function () {
    console.log(selection);
}

$scope.selection = []

$scope.checkboxChange = function(index){

    var chapter = $scope.chapters[index];
    var idx = $scope.selection.indexOf(chapter);

    if (idx > -1){
        $scope.selection.splice(idx, 1);
    } else {
        $scope.selection.push(chapter);
    }
}

}]);

here you can very easily implement your submit function, just use the new selection object.

This really should be moved into a directive, but don't have time to write that right now :P

Thats close. All i need is to kick in the selected chapters to the backend viz postdata. I'l have to change entire code for the controller and write a directive for that? :\ — Jas1234, Sep 30 '14 at 17:28
oh yeah, I wrote as if chapters was the top level of the object, but you could very easily replace data structure or just inject it into the larger object in the submit method — stevethecollier, Sep 30 '14 at 17:30

Jared Reeves · Answer 2 · 2014-09-30T17:49:37.493

Here I created a controller for the snippet, and added some data to $scope.chapters object, and it is displaying correctly. The values disappear when selected, but that is another issue.

angular.module('myApp', [])
  .controller('myCtrl', ['$scope',
    function($scope) {

      $scope.chapters = [{
        name: 'Chapter 1: Negative Messages',
        id: "1",
        isSelected: false
      }, {
        name: 'Chapter 2: Physics',
        id: "2",
        isSelected: false
      }];

      $scope.submitItems = function(chapters) {
        alert(JSON.stringify(chapters));
      }

    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <span ng-repeat="chapter in chapters">                
        <input type="checkbox" name="checkbox" value="{{chapter}}" 
               ng-model="chapter.isSelected" />
        {{chapter.name}}
    </span>
    <br>
    <form ng-submit="submitItems(chapters)">
      <input ng-model="chapters" type="submit" id="save" value="Save" />
    </form>
  </div>
</div>

Edit: Updated the code to reflect the OP needs.

Thank you. It helped me for one part where you check the box. But assuming both are selected this chapters[$index] sends back 0:true, 1:true. I need it to be that points out Resource 0: true chapter 1:Negative Messages id: 1 Resource 1: true chapter 2:Physics id: 2 Like retrieve the whole list back again — Jas1234, Sep 30 '14 at 17:19
So what you are wanting is to submit all the items that are selected in the submit process? — Jared Reeves, Sep 30 '14 at 17:32
Here is what I would do. I would add an isSelected property to the object and then on the check box input bind to that value. Then I would wrap the submit in a form and use ng-submit to run a function like submitItem() and pass the whole chapters object to that function. I will update the code in a min. — Jared Reeves, Sep 30 '14 at 17:41

binding data in ng-repeat angularjs

2 Answers2