AngularJS: Reload data on div with controller and ng-repeat

Question

I am new in Angular JS and learning it. I have a div and load data from json on startup with controller with following code but I want to reload it again when json object changed after performing specific action.

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();           
        };
    }]);
})();

In following javascript file I am opening JSON file and reload products object with new data. After updating with new JSON file contents I have to reload data. I have tried to call reload from controller but its not working. Please help me, thanks in advance.

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();
        }
    }
};

Is EZPF.Application.getProducts() returning something, does $scope.products gets updated? — Zee
– Zee, Commented Jun 4, 2015 at 7:41
@Zee EZPF.Application.getProducts() returns same JSON with new values but I don't know how to recall div controller that fill {{product.Title}} — M. Nasir Javaid
– M. Nasir Javaid, Commented Jun 4, 2015 at 7:45
After that line write $scope.$apply(), your div shud get updated. — Zee
– Zee, Commented Jun 4, 2015 at 7:46
@Zee Its not working, Is there any other way to call reload method inside controller from javascript? — M. Nasir Javaid
– M. Nasir Javaid, Commented Jun 4, 2015 at 7:53

devqon · Accepted Answer · 2015-06-04 10:09:40Z

7

You are using the controller as (ng-controller="ProductsListCtrl as store") syntax, so you have to assign the variables to the controller itself (this) instead of the $scope:

var vm = this;

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

To reload the data:

<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

edited Jun 4, 2015 at 10:09

answered Jun 4, 2015 at 8:04

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

M. Nasir Javaid Over a year ago

Your are right but my problem is how to call reload() method from javascript after updating JSON?

M. Nasir Javaid Over a year ago

I have added Reload Data button but not refreshing the data :-(

M. Nasir Javaid Over a year ago

Is it AngularJS and JS communication fault? If I put again new hardcoded JSON inside reload() the refresh works but not working to call getProducts() method

M. Nasir Javaid Over a year ago

Can you tell me how to call reload() programmetically from JavaScript instead of Reload button?

devqon Over a year ago

From within the controller you can just do vm.reload()

|

Collectives™ on Stack Overflow

AngularJS: Reload data on div with controller and ng-repeat

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related