AngularJs处理多个复选框

Question

我的应用程序上有一个页面，其中列出了一系列问卷。 每个调查表下方都有一个同意书，用户可以在其中选择可以查看特定调查表的人。

我不太确定如何处理每个单独表单的多个复选框。 我已经将示例代码放在了plunker上，以供所有人查看。

app = angular.module('app', [])

.controller('QuestionnaireController', function($scope){

  $scope.questionnaires = [
        {id : 1, name : "Questionnaire One"},
        {id : 2, name : "Questionnaire Three"},
        {id : 2, name : "Questionnaire Four"},
    ];

    $scope.relationships = [
        {id : 1, name : "Joe Bloggs", role : "Parent"},
        {id : 2, name : "John Doe", role : "Teacher"},
        {id : 3, name : "Jane Doe", role : "Friend"}
    ];


    $scope.submitConsent = function(){
      //process form...
    }

});

http://plnkr.co/edit/b5rr8CC9xhcaLC6MNNig?p=info

任何帮助将非常感激 ：）

Answer 1

如果要将表单提交到服务器。 您应该为输入类型的复选框指定一个名称。 例如，使用“ ids”。 然后，将一个value属性添加到带有关系ID的复选框。

            <form class="form-group" ng-submit="submitConsent()">
                <label for="" ng-repeat="relation in relationships">
                    <input type="checkbox" name="ids" value="{{relation.id}}"/>
                    {{relation.name}} ({{ relation.role }})<br/>
                </label>

                <input type="submit" name="Submit Questionnaire" />
            </form>

在服务器端，您将获得一个ID数组，并根据您选择的服务器技术来处理该数组。

如果要在角度应用程序中获取ID。 请执行下列操作。

<form class="form-group" ng-submit="submitConsent()">
            <label for="" ng-repeat="relation in relationships">
                <input type="checkbox" value="{{relation.id}}" ng-click="relationSelected(relation.id)"/>
                {{relation.name}} ({{ relation.role }})<br/>
            </label>
            <div>{{ids}}</div>
            <input type="submit" name="Submit Questionnaire" />
        </form>

在javascript中，

$scope.ids = [];
$scope.relationSelected = function(id) {
    $scope.ids.push(id);
}