Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Javascript

Updating HTML View When Angular Array Changed

Post a Comment
In my code below I change an object value in the array's first item, but I am having trouble figuring out how to 'refresh' the HTML view so that what you see in the browser reflect

Solution 1:

Something needs to be called from within the Angular context. C

hange the app.controller part to be:

 app.controller('AppController', function() {
     this.files = dataArray;

     this.changeSomething = function() {
         dataArray[0].name = "facsimile.doc";
         alert(dataArray[0].name);
     };
 });

and the html to be:

<body ng-controller="AppController as box" ng-init="box.changeSomething()">

Solution 2:

Instead of onload()(native javascript) you can use ng-init()(native angularjs) , to change the values :

CONTROLLER(your function into the controller):

app.controller('AppController', function() {
              var vm = this;
                vm.files = dataArray;

                vm.changeSomething= function() {
                  vm.files[0].name = "facsimile.doc";
                   alert(dataArray[0].name);
                 };
        });

HTML

<body ng-controller="AppController as box" ng-init="changeSomething()">
    //your code here 
</body>

Post a Comment for "Updating HTML View When Angular Array Changed"