如何绑定AngularJS中的复选框列表

Question

我有一个复选框列表如下：

<div flex="50" ng-repeat="formationType in formationTypeList">
            <md-checkbox class="md-warn md-align-top-left"
                         value="{{formationType.codeFormation}}"
                         name="formationSelection[]"
                         ng-checked="formationSelection.indexOf(formationType) > -1"
                         ng-click="toggleFormationTypeSelection(formationType)">
              {{ formationType.nom }}
            </md-checkbox>
          </div>

发送表单后，这是formationSelection的格式：

formationSelection = [
{
  codeFormation: 1,
  nom: "ENSA"
},
{
  codeFormation: 2,
  nom: "CPGE"
}
]

在另一种情况下，我想在打开表单时检查数组中定义的复选框如下：

$scope.formationSelection = res.candidatureProjetProfessionnel.formations;

对象res.candidatureProjetProfessionnel.formations包含：

formationSelection = [
{
  codeFormation: 1,
  nom: "ENSA"
},
{
  codeFormation: 2,
  nom: "CPGE"
}
]

当我检查$scope.formationSelection时，它包含我从res.candidatureProjetProfessionnel.formations获得的数据：

但即使$scope.formationSelection不为空，我也不知道为什么我的复选框没有被检查。

我该如何解决这个问题？

Answer 1

我不确定md-checkbox指令是什么，所以我将使用普通的复选框输入。一般来说，为角度输入设置默认值涉及两件事：

• 确保您的输入有ng-model来存储复选框的值和2路数据绑定（这样您也可以从控制器设置它）
• 在您的控制器中，将ng-model中声明的变量设置为您想要的任何默认值。

所以你的HTML：

<input type="checkbox" class="md-warn md-align-top-left" ng-
model="formationSelection[$index]" ng-true-value="{{formationType}}" 
name="formationSelection[]">

确保在选中时使用ng-true-value声明每个复选框的值。 ng-model设置为formationSelection[$index]，这基本上意味着每个复选框都是formationSelection数组中的一个项目，这样数组就是所有已检查输入值的集合。

现在$scope.formationSelection = res.candidatureProjetProfessionnel.formations应该有效

这是一个工作的plunker： http://plnkr.co/edit/sGm39DRWH9EOReiiSrIl?p=preview

Answer 2

你必须使用ng-model，如下所示。它应该是一个像$scope.data = {};这样的对象。这只是一个例子，希望你能够明白并处理你的场景。实际上你有如下所示的单独复选框，但是通过循环设置了值。所以你也可以将这个概念应用于你的用例。希望这对你有所帮助。

<强> HTML

 <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
            Checkbox 1: {{ data.cb1 }}
 </md-checkbox>

<强> JS

 $scope.data = {};
 $scope.data.cb1 = true;

在Codepen

上播放

Answer 3

我认为指令isFormation(formationType)上的方法ng-checked不会返回结果。

在你的控制器中创建一个功能

$scope.isFormation(_type){
  return $scope.formationSelection.filter(function(f){return f.nom === _type;}).length > 0;
}