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