Question

我真的想把我的复选框绑定到我的模型，但我还没有找到一个很好的方法，因为我在模型中有自定义逻辑。

我最终绑定到假/本地范围变量，然后在ng-change上更新模型。我用ng-init设置了复选框的初始值，如下所示：

<td ng-repeat="date in dates">
<md-checkbox ng-model="cb.state" aria-label="{{date.txt}}"
ng-change="saveState(person, date, cb.state)" 
ng-init="cb = getState(person, date);" ></md-checkbox>{{date.persons.length }}
</td>

简而言之 - 我不能将模型绑定到复选框的原因是因为它反映了这个人的键在日期对象上的数组中是 NOT 。我的getState和saveState如下：

$scope.saveState = function(person, date, state) {
    var index = date.persons.indexOf(person.name);

    if (state && index >= 0) {
        date.persons.splice(index, 1);
    } else if (!state && index < 0) {
        date.persons.push(person.name);
    }

    dates.$save(date);
};

$scope.getState = function(person, date) {
    return { state : date.persons.indexOf(person.name) < 0 };
};

这实际上有效，这很棒。当另一个客户端更新模型时，问题就出现了。更改模型后，视图也会更改。我实际上获得了人员数组的更新新长度（这就是为什么我把它放在示例中） - {{ date.persons.length }}已更新。另一方面我的复选框没有更新 - 这有点显而易见，因为ng-init不会被再次调用（它只在第一个init上被调用）而且我的ng-change也没有被调用 - 它＆＃ 39;仅在更改/单击复选框本身时调用。

我试图弄清楚最好的方法是什么但却无法下定决心。我有一个工作解决方案来触发网格的完全重新创建（请注意，这个ng-repeat只适用于一个人 - 我有一个人员列表的日期列表=大网格），如下所示：

dates.$watch(function (eventData) {
  dates = $scope.dates = $firebaseArray(fb.child("dates"));
});

由于要更新的所有数据，它会闪烁屏幕 - 我还担心如果一个客户端上的用户在此事件到达时更新整个网格时会发生什么情况。

我正在考虑的另一个解决方案是检查eventData以找出更改的日期，然后查找此日期的所有复选框（每个人一个）并手动触发更改事件（可能使用jqlite通过element建立的角度。然而，这个解决方案却尖叫“错误”。对我来说，因为这些dom操作违背了角度的显着性。

你们认为最好的是什么？

Answer 1

我最终得到了一个观察变化的解决方案，但只更新了受影响的日期。这仍然会更新列表中的所有人，但至少只会更新一个日期。

_dates.$watch(function (eventData) {
  var record = _dates.$getRecord(eventData.key)
  if (!record)
    return;

  var index = _dates.indexOf(record);
  _dates[index] = angular.copy(record);
});

我会暂时搁置问题/答案，看看是否有人能提出更好的解决方案。

不介意'new'_dates变量 - 我做了一些重构并将其移动到服务中。

模型绑定到本地范围。改变和初始化操纵真实模型

1 个答案: