2016-04-13 4 views
-1

В моем коде ниже я изменяю значение объекта в первом элементе массива, но мне трудно понять, как «обновить» представление HTML, так что то, что вы видите в браузере, отражает принудительные изменения.Обновление вида 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>

+0

будет автоматически изменяться * angularjs * – kiro112

+1

BCZ вы меняете массив из сферы угловых JS и угловой не знает о ваших изменениях, поэтому он не обновляет вид. –

+0

@ Питерсон это не глупость, я думаю, может быть, он пытается играть с угловыми, чтобы понять это лучше? –

ответ

2

Что-то должно быть вызвана из углового контекста. 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()"> 
+1

Ваше решение не может работать. ** box.changeSomething() ** не может быть распознан ** событием onload **. Вместо этого используйте ** ng-init **. –

+0

К сожалению, это не работает. –

+0

Это не решение, а намек на то, что не так. Создайте плункер, и я посмотрю. –

1

Вместо OnLoad() (родной JavaScript), вы можете использовать нг -init() (нативный угловой), чтобы изменить значения:

CONT ROLLER (ваша функция в контроллер):

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> 
+0

К сожалению, это не работает. –

Смежные вопросы