ng-repeat angularjs의 데이터 바인딩

Question

*이 코드는 내 html 파일입니다. 처럼 배열로 구성된 챕터를 반복하고 싶습니다. 내 코드는 선택된 체크 상자 만 (인덱스 값)을 true로 바인딩합니다. 하지만 난 장의 전체 목록과 그들의 i.d의 제출에 검색 할 필요합니다.

[{ "이름": "제 1 장 : 음성 메시지", " 중첩 루프에 그것을 반복 *

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

 
<span ng-repeat="chapter in chapters"> 
 
       
 
       \t <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 파일하는 방법을 알아낼 수 없습니다 "id": "832115"}, { "name": "2 장 : 물리학", "id": "832115"} ...]

Answer 1

여기에 스 니펫 용 컨트롤러를 만들고 몇 가지 da ta to $ scope.chapters 객체가 올바르게 표시되고 있습니다. 값을 선택하면 사라지지만 다른 문제입니다.

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>

편집 : 영업의 요구를 반영하기 위해 코드를 업데이트했습니다.

Answer 2

컨트롤러에서 선택한 개체의 목록을 유지 관리하는 것이 좋습니다. referenece이 게시물을 사용

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

및 JS : I이 바이올린 생성

How do I bind to list of checkbox values with AngularJS?

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); 
    } 
} 

}]);

여기에서 새 선택 개체를 사용하여 제출 기능을 매우 쉽게 구현할 수 있습니다.

이

정말 지시어로 이동해야합니다,하지만 지금 있음을 쓸 시간이 없어 : P