Fatal编程技术网
  • javascript/
  • Javascript AngularJS：使用控制器和ng repeat在div上重新加载数据

Javascript AngularJS：使用控制器和ng repeat在div上重新加载数据

javascript jquery html json angularjs

Javascript AngularJS：使用控制器和ng repeat在div上重新加载数据,javascript,jquery,html,json,angularjs,Javascript,Jquery,Html,Json,Angularjs,我对Angular JS是新手，正在学习。我有一个div，在控制器启动时用下面的代码从json加载数据，但我想在执行特定操作后json对象发生更改时再次重新加载它 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="htt

我对Angular JS是新手，正在学习。我有一个div，在控制器启动时用下面的代码从json加载数据，但我想在执行特定操作后json对象发生更改时再次重新加载它

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>
在下面的javascript文件中，我打开JSON文件并用新数据重新加载products对象。在使用新的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();
        }
    }
};
您使用的是
控制器as
（
ng controller=“ProductsListCtrl as store”
）语法，因此必须将变量分配给控制器本身（
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>


{{product.Title}}
重新加载数据
是
EZPF.Application.getProducts（）
返回了什么，是不是
$scope.products
得到了更新？@Zee EZPF.Application.getProducts（）返回了相同的JSON和新的值，但我不知道如何调用在那行write
$scope.$apply（）
，之后填充{{{product.Title}的div控制器，您的div shud得到更新。@Zee它不起作用，有没有其他方法从javascript调用控制器内部的重载方法？您能创建一个小提琴吗？您是对的，但我的问题是更新JSON后如何从javascript调用
reload（）
方法？我添加了“重载数据”按钮，但没有刷新数据：-（是AngularJS和JS通信故障吗？如果我再次将新的硬编码JSON放入
reload（）
中，刷新可以工作，但调用
getProducts（）
method不起作用。你能告诉我如何通过JavaScript编程调用
reload（）
而不是重新加载按钮吗？在控制器中，你只需执行
vm.reload即可（）
<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>