Angular数组更改时更新HTML视图

Updating HTML view when Angular array changed

本文关键字：更新 HTML 视图数组 Angular 更新时间：2024-06-04

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

        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

将app.controller部分更改为：

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

您可以使用ng-init（）（native angularjs）来更改值，而不是使用onload（）nativejavascript）：

控制器（您在控制器中的功能）：

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>