Javascript AngularJS：使用控制器和 ng-repeat 在 div 上重新加载数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30637763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: Reload data on div with controller and ng-repeat
提问by NASSER
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.
我是 Angular JS 的新手并正在学习它。我有一个 div 并在使用以下代码的控制器启动时从 json 加载数据，但我想在执行特定操作后更改 json 对象时再次重新加载它。
index.html
索引.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
我的Angular.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.
在以下 javascript 文件中，我打开 JSON 文件并使用新数据重新加载产品对象。使用新的 JSON 文件内容更新后，我必须重新加载数据。我试图从控制器调用重新加载，但它不起作用。请帮助我，提前致谢。
application.js
应用程序.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();
}
}
};
回答by devqon
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:
您正在使用controller as( ng-controller="ProductsListCtrl as store") 语法，因此您必须将变量分配给控制器本身 ( this) 而不是$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>
