3

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

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>
4

3 回答 3

4

它不更新的原因是因为ctrl.fruits正在参考观看。由于fruits列表引用永远不会改变绑定也永远不会改变。

这是一个简单的修复：

{{ctrl.fruits | json}}

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

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

于 2014-01-07T22:40:20.437 回答
2

编辑 2 我发现 2 恕我直言可用的解决方案

1

{{ctrl.fruits.toString()}}

2

<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)));

有了这个输出得到更新。
我还没有弄清楚如何没有计时器。
我猜只有水果成员的变化被识别，而不是列表内元素的变化。
可能与如何查看 AngularDart 集合的元素有关？

于 2014-01-07T18:53:34.687 回答
1

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

编辑

这是一个用原始 JS 编写的 JSFiddle ......它的工作方式与您期望的一样，使用这个 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，因为您的访问权限与运行复选框的控制器不在同一范围内。

于 2014-01-07T19:42:32.750 回答