CODEWITHSUNDEEP
angularjsangularjs-scopeecmascript-6
Ryan Helmoski
Ryan Helmoski

Reputation: 369

Map bound to AngularJS scope becomes empty object

Whenever I try to bind a Map to the scope, it is replaced with an empty object during the digest cycle. Can anyone explain why this is happening?

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testMap = new Map();
    $scope.testMap.set("testKey", "testValue");
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <pre>{{testMap}}</pre>
</div>

Upvotes: 0

Views: 247

Answers (1)

JB Nizet
JB Nizet

Reputation: 692023

Transforming a Map to JSON is not supported (or, to be precise, the entries of the map are not serialized as if they were the fields of a regular object).

So Angular can't display the content of the map (the json filter is implicitly used when displaying an object using {{ testMap }}.

Demonstration: http://plnkr.co/edit/AjJWNGXZLR5KhhJ8cz0g?p=preview

Related: How do you JSON.stringify an ES6 Map?

Upvotes: 3

Related Questions