angularjs – 绑定到Angular Dart中的Map的数据

发布时间：2020-12-17 07:07:42 所属栏目：安全来源：网络整理

导读：我正在尝试实现检查复选框列表中的多个项目的功能.我使用Map来存储数据及其选定/未选中状态. ListString fruits = [ {'fruit': 'apple','selected': true},{'fruit': 'banana',{'fruit': 'kiwi','selected': false}]; 复选框最初显示正确呈现的选中/未选中状

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

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

复选框最初显示正确呈现的选中/未选中状态,但是当我切换复选框的选中状态时,水果图不会更新.我怎样才能在这里正确创建双向绑定？

这是我的.dart文件：

import 'package:angular/angular.dart';

@NgDirective(
  selector: '[my-controller]',publishAs: 'ctrl'
)
class MyController {
  List<String> fruits = [
    {'fruit': 'apple','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>

解决方法

它没有更新的原因是因为ctrl.fruits正在引用.由于水果列表引用永远不会改变,绑定永远不会改变.

这是一个简单的修复：

{{ctrl.fruits | json}}

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

遗憾的是,没有简单的方法来深入观察对象,因为计算复杂性可能是无限的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!