1

我正在开发一个 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事件以启动控制器中的功能以手动处理填充客户对象模型正确部分的逻辑，并$watches执行相同操作。虽然我在那里取得了一些成功，但我有大约 2 打不同的复选框组需要以某种方式处理（实际的 SPA 是巨大的），我希望以一种非常干净和可重复的方式实现此功能，而无需重复大量的点击处理程序并设置大量的$watches临时值数组。社区中的任何人已经以他们认为非常“最佳实践”的方式解决了这个问题？

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

在旁注中，我对 plunkr 很陌生（http://plnkr.co/edit/xDjkY3i0pI010Em0Fi1L?p=preview）-我尝试设置一个示例以使人们更容易回答我的问题，但可以不能让它工作。如果有人想对此发表意见，我会提出第二个问题，我也会接受这个答案！:)

4

2 回答 2

1

这是我放在一起的 JSFiddle，它显示了您想要做什么。http://jsfiddle.net/zargyle/t7kr8/

It uses a directive, and a copy of the object to display if changes were made.
于 2013-09-13T21:49:39.300 回答
0

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

我拿了你的代码并写了这个例子：http ://plnkr.co/edit/nV4fQq?p=preview

于 2013-09-13T21:15:17.540 回答