angularjs - 如何处理angularJS动态表单中的多个复选框数据
问题描述
我已经从我的 Web API 动态添加了表单,我对如何获取复选框选择的数据感到困惑
动态形式
<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);
}
}
})
解决方案
您可以再添加一个名为的属性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}}">
推荐阅读
- sql - 通过使用火花数据框进行分组时获取具有条件的列的第一个值
- omnet++ - 如何在 UDPBAsicApp 消息中获得基于 INET 的 WirelessHost 速度?
- javascript - React npm start 导致 react web app 从任何目录启动同一个项目(即使该项目被删除)
- debugging - 为什么我在模拟器中运行代码时在调试区域看不到打印语句?
- networking - 为什么我们在 IPv4 地址中没有区域 ID(例如在 % 字符之后的 IPv6 地址)?
- ubuntu - Nexus 不断在 /tmp 目录中创建已删除的文件描述符导致系统内存不足
- node.js - 如何在单元测试中将 jest.spyOn 与 NestJS 事务代码一起使用
- bash - Bash:使变量随处可用(不是关于 EXPORT 的问题)
- angular - 角度 onChanges highcharts
- python - 如何从 python 的“question()”函数中调用我的“counting()”函数?