AngularJS model not updating inside javascript array

Question

I have a simple issue with AngularJS: the properties outside of the array update normally, but the array elements (that are bound to those properties) don't, here is a plunker to show that: http://plnkr.co/edit/gNtGhiTf228G8rP0O2iB?p=preview

var vm = this;

vm.topLine = {
        netWrittenPremiumLastFye: 1000000,
        netWrittenPremiumYtd: 123000
    }

vm.grossColumnChartData = [
        ['Previous YE', vm.topLine.netWrittenPremiumLastFye],
        ['YTD', vm.topLine.netWrittenPremiumYtd]
    ];

We can use $scope.$watch('something', function(oldValue, newValue) {...}) but that's not a good choice in my situation since i'll have to do that many times, repeatedly.

I want to take advantage of angular 2-way binding as explained above.

Any helps or suggestions are appreciated, thanks!

Digitrance · Accepted Answer · 2014-11-04 12:18:02Z

0

I think the only way you can do this without using $watch is by updating the array directly in the html binding.

{{ grossColumnChartData = [
        ['Previous YE', vm.topLine.netWrittenPremiumLastFye],
        ['YTD', vm.topLine.netWrittenPremiumYtd]
    ] }}
<br/>
grossColumnChartData = {{grossColumnChartData | json}}

See this: http://plnkr.co/edit/uthXcvoWSV2XNRFJzkck?p=preview

answered Nov 4, 2014 at 12:18

Digitrance

7597 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phat Tran Over a year ago

Oh but i need to model somewhere else in the controller, not just in HTML. Why the array elements with Angular binding don't change? So curious. Anyway thanks for that, at least i have another option :) Very great if we have somehow to update the array elements in the controller.

Digitrance Over a year ago

There is another option -- $watch -- but you said you don't want to use it! :)

Phat Tran · Accepted Answer · 2014-11-05 04:00:16Z

0

I have updated my plnkr and i have my answer now: http://plnkr.co/edit/gNtGhiTf228G8rP0O2iB?p=preview

<div ng-repeat="item in vm.grossColumnChartData">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item.data" type="text"/>
</div>

I was confused between data binding and reference.

I used ng-repeat to update the array elements.

answered Nov 5, 2014 at 4:00

Phat Tran

291 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

AngularJS model not updating inside javascript array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related