数据绑定到 Angular Dart 中的地图答案

【问题标题】：Data binding to a Map in Angular Dart数据绑定到 Angular Dart 中的地图
【发布时间】：2014-01-25 14:11:02
【问题描述】：

我正在尝试实现检查复选框列表中多个项目的功能。我正在使用地图来存储数据及其选择/未选择状态。

List<String> fruits = [
  {'fruit': 'apple', 'selected': true},
  {'fruit': 'banana', 'selected': true},
  {'fruit': 'kiwi', 'selected': false}
];

复选框最初显示为正确呈现选中/未选中状态，但是当我切换复选框的选中状态时，fruits 映射不会更新。如何在此处正确创建双向绑定？

这是我的 .dart 文件：

import 'package:angular/angular.dart';

@NgDirective(
  selector: '[my-controller]',
  publishAs: 'ctrl'
)
class MyController {
  List<String> fruits = [
    {'fruit': 'apple', 'selected': true},
    {'fruit': 'banana', 'selected': true},
    {'fruit': 'kiwi', 'selected': false}
  ];
}

main() {
  ngBootstrap(module: new Module()..type(MyController));
}

这是视图标记：

<!DOCTYPE html>
<html ng-app>
  <body>
    <div my-controller>            
      <ul>
        <li ng-repeat="item in ctrl.fruits">
          {{item['fruit']}}
          <input type="checkbox" ng-model="item['selected']" />
        </li>
      </ul>
    </div>

    <!-- THIS DOES NOT UPDATE WHEN THE CHECKBOXES ARE TOGGLED -->
    {{ctrl.fruits}}

    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>
  </body>
</html>

【问题讨论】：

一些附加数据：如果我将<li> 中的标记更改为{{item['fruit']}}-{{item['selected']}}，切换复选框显然会更改selected 字段。但是{{ctrl.fruits}} 整个地图似乎没有更新。
我在打印地图的构造函数中添加了一个周期性计时器。更改复选框时，地图中的“选定”值会更新。只有{{ctrl.fruits}} 没有更新。

标签： angularjs dart angular-dart

【解决方案1】：

编辑 2 我找到了 2 个恕我直言可用的解决方案

{{ctrl.fruits.toString()}}

<div ng-repeat="item in ctrl.fruits">{{item['fruit']}} - {{item['selected']}}

编辑

小改进，但仍然是一个丑陋的解决方法

  void update() {
    var tmp = fruits;
    fruits = null;
    Timer.run(() => fruits = tmp);
  }

<input type="checkbox" ng-model="item['selected']" ng-click="ctrl.update()"/>

第一我添加了一个定期调用的计时器

new Timer.periodic(new Duration(milliseconds: 2000), (t) => print(fruits = new List.from(fruits)));

这样输出得到更新。
我还没有弄清楚如何没有计时器。
我猜只有水果成员的变化被识别，而不是列表中元素的变化。
可能与How do I watch elements of an AngularDart collection?有关

【讨论】：

【解决方案2】：

我的猜测是尝试$watch...我对飞镖不熟悉，但你的问题听起来就像你的对象不是deep watched。如果没有深入的观察，Angular 将fruits 视为一个包含 3 个对象的数组，并且不会再往下看。通过深度观察，它会看到一个包含 3 个对象的数组，以及这些对象的属性，当它们发生变化时它应该更新。

编辑

Here's a JSFiddle 用原始 JS 编写...使用这个 JS，它的工作方式与您期望的一样

function TodoCtrl($scope) {
  $scope.fruits = [
  {'fruit': 'apple', 'selected': true},
  {'fruit': 'banana', 'selected': true},
  {'fruit': 'kiwi', 'selected': false}
];

  $scope.printFruits = function(){return JSON.stringify($scope.fruits);}
}

还有一些真正愚蠢的 HTML

<div ng-app>
  <div ng-controller="TodoCtrl">      
     <ul>
       <li ng-repeat="item in fruits">
         {{item['fruit']}}
         <input type="checkbox" ng-model="item['selected']" />
       </li>
     </ul>
    <span>{{printFruits()}}</span> <!-- Works correctly as items are checked -->
  </div>
</div>

您可以尝试将您对ctrl.fruits 的访问权移至作为控制器运行的同一div；您可能无法获得 fre $watch，因为您的访问权限与运行复选框的控制器不在同一范围内。

【讨论】：

【解决方案3】：

之所以没有更新是因为ctrl.fruits正在被关注参考。由于fruits 列表引用永远不会改变绑定也永远不会改变。

这是一个简单的修复：

{{ctrl.fruits | json}}

通过过滤器运行它，它会强制对象在每个摘要中进行 JSON 化。

不幸的是，没有简单的方法可以深入观察对象，因为计算复杂度可能是无限的。

【讨论】：