Question

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

＆＃13;

<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" />

＆＃13;

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

[{＆＃34; name＆＃34;：＆＃34;第1章：负面消息＆＃34;，＆＃34; id＆＃34;：＆＃34; 832115＆＃34;}，{＆＃34 ;姓名＆＃34;：＆＃34;第2章：物理＆＃34;，＆＃34; id＆＃34;：＆＃34; 832115＆＃34;}，...]

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

在这里，我为片段创建了一个控制器，并将一些数据添加到$ scope.chapters对象，并且它正确显示。选中后，这些值会消失，但这是另一个问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

ng-repeat angularjs中的绑定数据

2 个答案: