在 ng-repeat angularjs 中绑定数据

Question

*这是我的 html 文件，我想在其中重复章节，这是一个看起来像的数组 我的代码仅将选定的复选框（索引值）绑定为真。但我需要在提交时检索整个章节列表及其 ID。 无法弄清楚如何在嵌套循环上迭代它 *

<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 文件：

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

Answer 1

我建议在控制器中维护一个选定对象的列表。

以此帖子为参考：How do I bind to list of checkbox values with AngularJS?

我创建了这个小提琴：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：

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

Answer 2

在这里，我为 sn-p 创建了一个控制器，并向 $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>

编辑：更新代码以反映 OP 需求。