Updating HTML view when Angular array changed

Question

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 reflects the forced change.

        var dataArray = [{
            name: 'fax.doc',
            size: 100,
        }, {
            name: 'fax.pdf',
            size: 110,
        }, {
            name: 'fax.xls',
            size: 120,
        }];    
    
        (function() {
            var app = angular.module('myApp', []);

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


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

    <!doctype html>
    <html ng-app="myApp">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
    
    <body ng-controller="AppController as box" onload="changeSomething()">

    <table border="1">
            <tr ng-repeat="file in box.files">
            <td>{{file.name}}</td>
            <td>{{file.size}} bytes</td>
        </tr>
    </table>
    
    </body>
    </html>

Bcz you are changing your array out of scope of angular js and angular is not aware of your changes so it is not updating view.. — Mohammad Usman
– Mohammad Usman, Commented Apr 13, 2016 at 5:38
@Peterson this is not stupidity i think, may be he is trying to play with angularjs to understand it better? — Mohammad Usman
– Mohammad Usman, Commented Apr 13, 2016 at 5:46

Nirav Ranpara · Accepted Answer · 2016-04-13 10:12:32Z

2

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()">

edited Apr 13, 2016 at 10:12

Nirav Ranpara

13.8k4 gold badges43 silver badges55 bronze badges

answered Apr 13, 2016 at 5:38

Gene

6164 silver badges8 bronze badges

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

2 Comments

Ganesh Matkam Over a year ago

Your solution can't work. box.changeSomething() can't be recognized by onload event. Instead use ng-init there.

Gene Over a year ago

It's not a solution but a hint at what is wrong. Create a plunker and I'll take a look.

Theo Itzaris · Accepted Answer · 2016-04-13 05:59:06Z

1

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>

answered Apr 13, 2016 at 5:59

Theo Itzaris

4,7067 gold badges44 silver badges77 bronze badges

Collectives™ on Stack Overflow

Updating HTML view when Angular array changed

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related