Angular數組更改時更新HTML視圖

Question

在下面的代碼中，我在數組的第一項中更改了對象值，但是在弄清楚如何“刷新” 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>

Answer 1

需要從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()">

Answer 2

可以使用ng-init（） （native angularjs）代替onload（） （本機javascript）來更改值：

控制器（您的功能進入控制器）：

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>

Angular數組更改時更新HTML視圖

問題描述

2 個解決方案

解決方案1
2 2016-04-13 05:38:24

解決方案2
1 2016-04-13 05:59:06

Angular數組更改時更新HTML視圖

問題描述

2 個解決方案

解決方案1 2 2016-04-13 05:38:24

解決方案2 1 2016-04-13 05:59:06

解決方案1
2 2016-04-13 05:38:24

解決方案2
1 2016-04-13 05:59:06