1. ev
  2. Soru-cevap
  3. Açısal dizi değiştiğinde HTML görünümünün güncellenmesi

Açısal dizi değiştiğinde HTML görünümünün güncellenmesi

2016-04-13 23 views
-1

Aşağıdaki kodumda dizinin ilk öğesindeki bir nesne değerini değiştirdim, ancak tarayıcıda gördüğünüz öğeyi görebilmeniz için HTML görünümünü nasıl "yenileyeceğinizi" beliriyorum. zorlanmış değişim.Açısal dizi değiştiğinde HTML görünümünün güncellenmesi

 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>

kaynak

2016-04-13 Daniel Williams

+0

app.controller('AppController', function() { var vm = this; vm.files = dataArray; vm.changeSomething= function() { vm.files[0].name = "facsimile.doc"; alert(dataArray[0].name); }; });

HTML * angularjs * – kiro112

+1

BCz Eğer açısal js ve açısal kapsamı dışındadır dizinizi değişiyor değişikliklerin farkında değil bu yüzden görüntü güncellenmiyor .. –

+0

@Peterson bu aptallıkları ile daha iyi anlamak için oynamaya çalışıyor olabilir, bence aptallık değil mi? –

cevap

2

şey Açısal kapsamında çağrılabilir gerekmektedir. app.controller parçası hange

Cı

olması: 

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

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

ve html olması:

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

kaynak

2016-04-13 05:38:24

+1

Çözümünüz işe yaramıyor. ** box.changeSomething() **, ** onload ** olayı tarafından tanınamaz. Bunun yerine ** ng-init ** kullanın. –

+0

Ne yazık ki, bu işe yaramıyor. –

+0

Bu bir çözüm değil, neyin yanlış olduğuna dair bir ipucu. Bir plunker oluştur ve ben bir bakacağım. –

1

yerine Onload() (doğal JavaScript) Eğer ng kullanabilir -init() (yerel angularjs), değerleri değiştirmek için:

CONT ROLLER (kumanda içine fonksiyonu): Bu değişiklik otomatik olarak alınacaktır

<body ng-controller="AppController as box" ng-init="changeSomething()"> 
    //your code here 
</body>

kaynak

2016-04-13 05:59:06

+0

Ne yazık ki, bu işe yaramıyor. –

İlgili konular

 İlgili konular