Question

我有一个包含5个复选框的表单

HTML

<div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Dismiss: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.showDismiss" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>
<div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Date: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.showDate" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>
<div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Time: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.showTime" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>
<div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Time to Complete: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.timeToComplete" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>
<div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Cost to Complete: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.costToComplete" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>

我希望将这些复选框值添加到我的控制器中，并采用特定格式，如

var settings = {
"label": ["dismiss", "date", "time", "timeToComplete", "costToComplete", "comments", "commentsWF", "wfName", "wfcomments", "documents", "wfFields", "wfEndBtn"],
"value": ["false", "true", "true", "false", "false", "true", "false", "true", "false", "false", "false", "true"]
}

实际上我需要将此设置变量发送到提交值的API。我不知道我该怎么做？

任何帮助

Answer 1

你在找这个吗？

<强> HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">
  <div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Dismiss: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.showDismiss" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>
<div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Date: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.showDate" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>
<div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Time: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.showTime" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>
<div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Time to Complete: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.timeToComplete" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>
<div class="col-sm-12 col-xs-12">
<label class="control-label col-xs-6 col-sm-6">Cost to Complete: </label>
<label class="col-xs-6 col-sm-6 tasks-toggle-btn">
    <input name="switch-field-1" class="ace ace-switch ace-switch-7" ng-model="settingsCtrl.costToComplete" type="checkbox" />
    <span class="lbl"></span>
</label>
</div>

<button class="btn btn-default" ng-click="submitBoxValue(settingsCtrl)" >submit</button>

{{value}}
</div>
  </body>
</html>

<强>角

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {

  var settings = {
"label": ["dismiss", "date", "time", "timeToComplete", "costToComplete", "comments", "commentsWF", "wfName", "wfcomments", "documents", "wfFields", "wfEndBtn"],
"value": ["false", "true", "true", "false", "false", "true", "false", "true", "false", "false", "false", "true"]
};


$scope.submitBoxValue = function(cbox){

 $scope.value=cbox;
}

});

Plunker：

http://plnkr.co/edit/mEvv3aldbOS7kF6tkEZ0?p=preview

格式化特定格式的复选框值 - AngularJS

1 个答案: