Angular数组更改时更新HTML视图 | Angular数组更改时更新HTML视图

本文介绍了Angular数组更改时更新HTML视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在下面的代码中，我在数组的第一项中更改了对象值，但是在弄清楚如何刷新" HTML视图以使您在浏览器中看到的内容反映强制更改时遇到了麻烦.

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>

推荐答案

需要从Angular上下文中调用某些东西.C

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

将app.controller部分保留为:

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);
     };
 });

和html是:

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

这篇关于Angular数组更改时更新HTML视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！