AngularJS: Перезагрузите данные на div с контроллером и ng-repeat

Я новичок в Angular JS и изучаю его. У меня есть данные div и load от json при запуске с контроллером со следующим кодом, но я хочу перезагрузить его снова, когда объект json изменился после выполнения определенного действия.AngularJS: Перезагрузите данные на div с контроллером и ng-repeat

index.html

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html ng-app="ezpf" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script src="lib/angular.js"></script> 
     <script src="lib/jquery.min.js"></script> 
    </head> 
    <body onload="EZPF.Application.initialize()"> 
     <div id="btn-import" class="my-button button-small" onClick="EZPF.Application.openFile(this)"> 
        <span class="button-title">Import</span> 
        <span class="button-help">This button will do something       else.</span>       
     </div> 
     <div class="page" id="pro" ng-controller="ProductsListCtrl as store"> 
      <div ng-repeat="product in store.products.Products">      
        {{product.Title}} 
      </div> 
     </div> 
    </body> 
</html>

myAngular.js

(function() 
{ 
    var app = angular.module('ezpf', []); 
    app.controller('ProductsListCtrl',['$scope', function($scope) 
    { 
     this.products = EZPF.Application.getProducts();  
     $scope.reload = function()   
     {   
      $scope.products = EZPF.Application.getProducts();   
     }; 
    }]); 
})();

В следующем файл JavaScript Я открываю файл в формате JSON и перезагрузить продукты объект с новыми данными. После обновления с новым содержимым файла JSON я должен перезагрузить данные. Я попытался вызвать перезагрузку с контроллера, но он не работает. Пожалуйста, помогите мне, спасибо заранее.

application.js

var EZPF; 
if (!EZPF) 
    EZPF = {}; 
if (!EZPF.Application) 
    EZPF.Application = {}; 


EZPF.Application = 
{  
    products: [], 
    getProducts: function() 
    { 
     if (this.products.length == 0) 
     { 
      this.products = 
      { 
       "Products": [ 
       { 
        "Title": "default name" 
        .... 
       }] 
      } 
     } 
     return this.products; 
    }, 
    openFile: function() 
    { 
     var docsDir = air.File.documentsDirectory; 
     try 
     { 
      var jsonFilter = new air.FileFilter("JSON Files", "*.json"); 
      docsDir.browseForOpenMultiple("Select JSON Files", [jsonFilter]); 
      docsDir.addEventListener(air.FileListEvent.SELECT_MULTIPLE, filesSelected); 
     } 
     catch (error) 
     { 
      air.trace("Failed:", error.message) 
     } 

     function filesSelected(event) 
     { 
      air.trace(event.files[0].nativePath); 
      var myFile = new window.runtime.flash.filesystem.File(); 
      var file = myFile.resolvePath(event.files[0].nativePath); 
      var fileStream = new air.FileStream(); 
      fileStream.open(file, air.FileMode.READ); 
      this.products = fileStream.readMultiByte(fileStream.bytesAvailable, air.File.systemCharset); 
      fileStream.close(); 
      air.trace(products); 
      $('#pro').reload(); 
     } 
    } 
};

источник

2015-06-04 X-TECH

Является ли 'EZPF.Application.getProducts()' что-то возвращать, обновляется ли '$ scope.products'? – Zee

@Zee EZPF.Application.getProducts() возвращает тот же JSON с новыми значениями, но я не знаю, как вызвать контроллер div, который заполняет {{product.Title}} –

После этой строки напишите '$ scope. $ Apply()' , ваш div shud обновляется. – Zee

Вы используете (ng-controller="ProductsListCtrl as store") синтаксис controller as, так что вы должны назначить переменные в самом контроллере (this) вместо $scope:

var vm = this; 

vm.products = EZPF.Application.getProducts();  
vm.reload = function()   
{   
    vm.products = EZPF.Application.getProducts();   
};

Для перезагрузки данных:

<div class="page" id="pro" ng-controller="ProductsListCtrl as store"> 
    <div ng-repeat="product in store.products.Products">      
     {{product.Title}} 
    </div> 
    <!-- Button for reloading the data --> 
    <button ng-click="store.reload()">Reload Data</button> 
</div>

JSFIDDLE

источник

2015-06-04 08:04:23 devqon

Вы правы, но моя проблема заключается в том, как вызвать метод 'reload()' из javascript после обновления JSON? –

См. Обновленный ответ – devqon

Я добавил кнопку «Обновить данные», но не обновляю данные :-( –

AngularJS: Перезагрузите данные на div с контроллером и ng-repeat

ответ

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