如何以angularJS动态形式处理多个复选框数据

Question

我已经从Web API中动态添加了表单，但我对如何获取复选框选中的数据感到困惑

codepen

dynamic.form

<form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()">

    <div ng-repeat="field in entity.fields">

        <ng-form name="form">

            <!-- TEXT FIELDS -->
            <div ng-if="field.type=='text'" class="form-group" ng-class="{ 'has-error' : 
            form[field.name].$dirty && form[field.name].$error.required,
            'has-success': form[field.name].$valid}">
                <label class="col-sm-2 control-label">{{field.label}}</label>
                <div class="col-sm-6">
                    <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" ng-model="field.data"
                        class="form-control" required />
                    <p class="help-block" ng-show="form[field.name].$dirty && form[field.name].$error.required">{{field.name}}
                        is required</p>
                    <!-- <p class="help-block" ng-show="{{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">required</p> -->
                </div>
            </div>

            <!-- EMAIL FIELDS -->
            <div ng-if="field.type=='email'" class="form-group" ng-class="{ 'has-error' : 
                ((form[field.name].$dirty && form[field.name].$error.required) || (form[field.name].$error.email)),
                'has-success': form[field.name].$valid}">
                <label class="col-sm-2 control-label">{{field.label}}</label>
                <div class="col-sm-6">
                    <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" ng-model="field.data"
                        class="form-control" required />
                    <span class="help-block" ng-show="form[field.name].$dirty && form[field.name].$error.required">{{field.name}}
                        is required</span>
                    <span class="help-block" ng-show="!form[field.name].$error.required && form[field.name].$error.email">Please
                        enter valid {{field.name}}</span>
                    <!-- <p class="help-block" ng-show="{{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">required</p> -->
                </div>
            </div>

            <!-- PASSWORD FIELDS -->
            <div ng-if="field.type=='password'" class="form-group" ng-class="{ 'has-error' : 
                ((form[field.name].$dirty && form[field.name].$error.required) || (form[field.name].$error.minlength || form[field.name].$error.maxlength)),
                'has-success': form[field.name].$valid}">
                <label class="col-sm-2 control-label">{{field.label}}</label>
                <div class="col-sm-6">
                    <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" ng-model="field.data"
                        ng-minlength={{field.min}} ng-maxlength={{field.max}} class="form-control" required />
                    <p class="help-block" ng-show="form[field.name].$dirty && form[field.name].$error.required">{{field.name}}
                        is required</p>
                    <p class="help-block" ng-show="!form[field.name].$error.required && (form[field.name].$error.minlength || form[field.name].$error.maxlength)">Passwords
                        must be between 8 and 20 characters</p>
                </div>
            </div>

            <!-- SELECT FIELDS -->
            <div ng-if="field.type=='select'" class="form-group" ng-class="{ 'has-error' : 
                form[field.name].$invalid && form[field.name].$touched,
                'has-success': form[field.name].$valid}">
                <label class="col-sm-2 control-label">{{field.label}}</label>
                <div class="col-sm-6">
                    <select type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" ng-model="field.data"
                        class="form-control" required>
                        <option value=''>Select Department</option>
                        <option ng-repeat="field in field.options" value="{{field.name}}">
                            {{field.name}}
                        </option>
                    </select>
                    <p class="help-block" ng-show="form[field.name].$invalid && form[field.name].$touched">{{field.name}}
                        is required</p>
                </div>
            </div>

            <!-- RADIO BUTTONS -->
            <div ng-if="field.type=='radio'" class="form-group" ng-class="{ 'has-error' : 
            form[field.name].$invalid && form[field.name].$touched,
            'has-success': form[field.name].$valid}">
                <label class="col-sm-2 control-label">Clouds</label>
                <div class="col-sm-6">
                    <label class="radio-inline" ng-repeat="option in field.options">
                        <input type="radio" ng-model="field.data" name="taskGroup" id="{{option.name}}" value="{{option.id}}">
                        {{option.name}}
                    </label>
                </div>
            </div>

            <!-- CHECK BOXES -->
            <div ng-if="field.type=='checkbox'" class="form-group" ng-class="{ 'has-error' : 
            form[field.name].$invalid && form[field.name].$touched,
            'has-success': form[field.name].$valid}">
                <label class="col-sm-2 control-label">Clouds</label>
                <div class="col-sm-6">
                    <label class="checkbox-inline" ng-repeat="option in field.options">
                        <input type="checkbox" ng-model="field.data" name="taskGroup" id="{{option.name}}" value="{{option.id}}">
                        {{option.name}}
                    </label>
                </div>
            </div>

        </ng-form>

    </div>

    <br />
    <button ng-disabled="myForm.$invalid" type="submit" id="submit">Submit</button>
    <br />

</form>

{{entity|json}}

控制器

routerApp.controller('DynamicController1', ['$scope', function ($scope) {
    // we would get this from the api
    $scope.entity = {
        name: "Course",
        fields:
            [
                { type: "text", name: "firstname", label: "Name", required: true, data: "" },
                { type: "radio", name: "color_id", label: "Colors", options: [{ id: 1, name: "orange" }, { id: 2, name: "pink" }, { id: 3, name: "gray" }, { id: 4, name: "cyan" }], required: true, data: "" },
                { type: "email", name: "emailUser", label: "Email", required: true, data: "" },
                { type: "text", name: "city", label: "City", required: true, data: "" },
                { type: "password", name: "pass", label: "Password", min: 6, max: 20, required: true, data: "" },
                { type: "select", name: "teacher_id", label: "Teacher", options: [{ name: "Mark" }, { name: "Claire" }, { name: "Daniel" }, { name: "Gary" }], required: true, data: "" },
                { type: "checkbox", name: "car_id", label: "Cars", options: [{ id: 1, name: "bmw" }, { id: 2, name: "audi" }, { id: 3, name: "porche" }, { id: 4, name: "jaguar" }], required: true, data: "" }
            ]
    };

    $scope.submitForm = function () {
        $log.debug($scope.entity);
    }
}]);

routerApp.directive("dynamicName",function($compile){
    return {
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs){
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    }
})

Answer 1

您可以再添加一个名为value的属性，该属性将用作模型，以便您轻松获取值。

{type: "checkbox", name: "car_id", label: "Cars" ,
 options:[{id: 1, name: "bmw", value:false},
{id: 2, name: "audi", value:false },{id: 3, name: "porche", value:false},
{id: 4, name: "jaguar", value:false}], required: true, data:""}

然后在您的模型中，将其用作模型

  <input type="checkbox" ng-model="option.value"
    name="taskGroup" id="{{option.name}}" value="{{option.id}}">

Demo