Macabeus Macabeus - 4 months ago 7
AngularJS Question

Why ng-bind does not work with array?

I am wanting to create a bind to an element with an array, for when the array is changed, the HTML to be updated. But, it's not work.

HTML

<body ng-controller="Game as game">

<div>
<span ng-bind="game.testString"></span>
</div>

<div>
<span ng-bind="game.testArray"></span>
</div>

<input type="button" ng-click="game.btnAddLetter()" value="Change">
</body>


JS

angular.module('notesApp', [])
.controller('Game', [function() {
var self = this;
self.testString = 'a';
self.testArray = ['a'];

self.btnAddLetter = function() {
self.testString = 'X';
self.testArray.push('X');
}
}]);


I expected the two span would be updated, however, only the
testString
has been updated. For what reason did this happen? How to solve this problem?

Answer

You must use the JSON filter:

<span ng-bind="game.testArray | json"></span>