我正在尝试实现检查复选框列表中的多个项目的功能。我正在使用 Map 来存储数据及其选定/未选定状态。
List<String> fruits = [
{'fruit': 'apple', 'selected': true},
{'fruit': 'banana', 'selected': true},
{'fruit': 'kiwi', 'selected': false}
];
复选框最初显示为正确呈现的选中/未选中状态，但是当我切换复选框的选中状态时，fruits map 不会更新。如何在这里正确创建双向绑定(bind)？
这是我的 .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));
}
这是 View 标记:
<!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正在引用中进行监视。由于 fruits 列表引用永远不会改变，因此绑定(bind)也永远不会改变。
这是一个简单的修复:
{{ctrl.fruits | json}}
通过过滤器运行它，它会强制对象在每个摘要中进行 JSON 化。
不幸的是，没有简单的方法来深度观察对象，因为计算复杂性可能是无限的。
关于angularjs - 在 Angular Dart 中将数据绑定(bind)到 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20979344/