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"},...]

Are you trying to embed an <input> inside a <label>? — PM 77-1
– PM 77-1, Commented Sep 30, 2014 at 16:45
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
– Jas1234, Commented Sep 30, 2014 at 16:48

Community · Accepted Answer · 2017-05-23 12:21:22Z

1

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

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Sep 30, 2014 at 17:22

stevethecollier

1,03411 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jas1234 Over a year ago

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? :\

stevethecollier Over a year ago

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

Jared Reeves · Accepted Answer · 2014-09-30 17:49:37Z

0

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.

edited Sep 30, 2014 at 17:49

answered Sep 30, 2014 at 17:11

Jared Reeves

1,3902 gold badges15 silver badges29 bronze badges

3 Comments

Jas1234 Over a year ago

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

Jared Reeves Over a year ago

So what you are wanting is to submit all the items that are selected in the submit process?

Jared Reeves Over a year ago

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.

Collectives™ on Stack Overflow

binding data in ng-repeat angularjs

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related