javascript - AngularJS: Reload data on div with controller and ng-repeat -
i new in angular js , learning it. have div , load data json on startup controller following code want reload 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 else.</span> </div> <div class="page" id="pro" ng-controller="productslistctrl 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 opening json file , reload products object new data. after updating new json file contents have reload data. have tried call reload controller not working. please me, 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(); } } };
you using controller as (ng-controller="productslistctrl store") syntax, have assign variables controller (this) instead of $scope:
var vm = this; vm.products = ezpf.application.getproducts(); vm.reload = function() { vm.products = ezpf.application.getproducts(); }; to reload data:
<div class="page" id="pro" ng-controller="productslistctrl store"> <div ng-repeat="product in store.products.products"> {{product.title}} </div> <!-- button reloading data --> <button ng-click="store.reload()">reload data</button> </div>
Comments
Post a Comment