javascript - AngularJS 确保在初始加载的表单中设置复选框值

Question

我创建了一个表单，在编辑时有多个复选框，使用下面的代码检查了表单复选框。

查看

<form method="POST" name="LeadCircle" role="form" ng-submit="addLeadCircle()">
  <input type="hidden" ng-model="form.addleadcircle.leadId" name="leadId" />
  <div class="select-basket">
    <div class="checkbox" ng-repeat="circle in circles">
      <input class="checkboxCircle" type="checkbox" ng-checked="{{circle.checked}}" name="leadcircle[]" ng-model="form.addleadcircle.leadcircle[circle.Id]" value="{{circle.Id}}" id="cb-{{circle.Id}}">
      <label for="cb-{{circle.Id}}">{{circle.Name}}</label>
    </div>
  </div>
  <button type="submit" class="btn btn-outline-secondary button-sm text-uppercase pull-right">Add</button>
</form>

AnguarJS

$scope.addLeadCircle = function () {
     console.log($scope.form.addleadcircle);
     return false; 
     dataFactory.httpRequest(base_url + 'leadCircles/addLeadCircle', 'POST', {}, $scope.form.addleadcircle).then(function (data) {
         alertify.notify('Assign circle successfully', 'success', 5, function () {});
         return;
     });
}

此代码还显示了需要检查哪个值的复选框。但是如果我尝试提交表单会发生什么，它不会给出这个已经选中的复选框的值如果我要选择新的复选框它会给出那个新选中的复选框的值。

现在在控制台中编辑表单如果我将直接提交表单而不选中任何复选框，那么它只会采用隐藏的输入值而不是已选中的复选框值。如果我选择新的复选框，那么它只需要新选择的复选框值。

任何人都可以在此提前致谢。

Answer 1

您的代码中有几个问题。首先，ng-checked 需要一个对象而不是字符串。您应该将其更改为 ng-checked="circle.checked"。您也不需要 value 属性，因为 ng-model 保存您的输入值。而不是使用 ng-checked 我更愿意使用 ng-init 在你的 ng-model 上创建一个默认值。这样，您将始终为提交时的每个复选框设置一个参数。它还使 ng-checked 过时，因为 ng-model 处理“检查”状态。

查看

<div ng-controller="MyCtrl">
  <form ng-submit="submit()">
    <div ng-repeat="item in data">
      <input class="checkboxCircle" 
      type="checkbox" 
      name="leadcircle[]" 
      ng-model="form.addleadcircle.leadcircle[item.id]" 
      ng-init="form.addleadcircle.leadcircle[item.id] = item.value" // <- ensure init value
      id="cb-{{item.id}}"> {{item.id}}
    </div>
    <button type="submit">
      Send
    </button>
  </form>
</div>

AngularJS 应用

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {

  $scope.form = {
    addleadcircle: {
      leadcircle: []
    }
  }

  $scope.data = [{
    id: 1,
    value: true
  }, {
    id: 2,
    value: false
  }, {
    id: 3,
    value: false
  }, {
    id: 4,
    value: true
  }, {
    id: 5,
    value: false
  }, {
    id: 6,
    value: true
  }, {
    id: 7,
    value: true
  }, {
    id: 8,
    value: false
  }];

  $scope.submit = function () {
    console.log($scope.form);
  }
});

>> Demo fiddle