Angularjs 将一组复选框映射到嵌套数组

我正在开发一个SPA，它从一个

$resource

调用中提取客户数据，并从另一个

$resource

调用中获取一些通用偏好数据

首选项数据作为数组发送，我想用它填充一系列复选框，如下所示：

<div ng-repeat="pref in fieldMappings.mealPrefs">
  <input type="checkbox"
          id="pref_{{$index}}"
          ng-model="customer.mealPrefs"
          ng-true-value="{{pref.name}}" />
  <label class="checkbox-label">{{pref.name}}</label>
</div>

.controller( 'AppCtrl', function ( $scope, titleService, AccountDataService ) {

  // this is actually loaded via $resource call in real app
  $scope.customer = {
    "name": "Bob",
    "mealPrefs":["1", "3"]
  };

  // this is actually loaded via $resource call in real app    
  $scope.fieldMappings.mealPrefs = [
      {'id':"1", 'name':"Meat"},
      {'id':"2", 'name':"Veggies"},
      {'id':"3", 'name':"Fruit"},
      {'id':"4", 'name':"None"}
  ];
});

我已尝试设置

ng click

事件以启动控制器中的功能，手动处理填充客户对象模型正确部分的逻辑，并尝试设置

$watchs

以执行相同操作。虽然我在那里取得了一些成功，但我有大约24个不同的复选框组需要以某种方式处理（实际的SPA非常庞大），我希望以一种非常干净和可重复的方式实现此功能，无需复制大量的单击处理程序，也无需在临时值数组上设置大量的

$watchs

。社区中的任何人都已经以他们认为相当“最佳实践”的方式解决了这个问题

如果这是一个重复，我很抱歉-我已经查看了大约十几个关于角度复选框的答案，但没有找到一个从一个对象模型中提取值并将其填充到另一个对象模型中的答案。任何帮助都将不胜感激

---

顺便说一句，我对plunkr（）非常陌生——我试着建立一个例子，让人们更容易回答我的问题，但无法让它起作用。如果有人想参与进来，我会提出第二个问题，我也会接受这个答案！：）

我会对复选框使用指令。可以从指令中设置customer.mealPrefs。在checkbox指令的link函数中，绑定到“change”事件并调用一个函数，该函数遍历客户的mealPrefs数组，并添加或删除正在更改的复选框的id

---

我接受了您的代码并编写了以下示例：

我将对复选框使用指令。可以从指令中设置customer.mealPrefs。在checkbox指令的link函数中，绑定到“change”事件并调用一个函数，该函数遍历客户的mealPrefs数组，并添加或删除正在更改的复选框的id

---

我接受了您的代码并编写了这个示例：

这里是我放在一起的一个JSFIDLE，它显示了您想要做的事情

---

下面是我放在一起的一个JSFIDLE，它显示了您想要做什么

---

谢谢你的建议——这是我想走的方向，但我不确定如何让它起作用。不幸的是，您链接的plunkr似乎没有更新客户模型（将

{{customer | json}}

添加到正文中不会显示

customer.mealPrefs

数组更新）。也许我看错了？谢谢你的建议-这是我想走的方向，但我不确定如何让它工作。不幸的是，您链接的plunkr似乎没有更新客户模型（将

{{customer | json}}

添加到正文中不会显示

customer.mealPrefs

数组更新）。也许我看错了？这对我来说非常有效-谢谢你花时间帮助我！这对我来说非常有效-谢谢你花时间来帮助我！

It uses a directive, and a copy of the object to display if changes were made.