AngularJS:使用控制器和 ng-repeat 重新加载 div 上的数据

2024-04-29

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

索引.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 文件内容更新后,我必须重新加载数据。我尝试从控制器调用重新加载,但它不起作用。请帮助我,提前致谢。

应用程序.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();
        }
    }
};

您正在使用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();           
};

重新加载数据:

<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 http://jsfiddle.net/ADukg/6738/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS:使用控制器和 ng-repeat 重新加载 div 上的数据 的相关文章

随机推荐

  • 如何创建二进制补丁?

    为二进制文件制作补丁的最佳方法是什么 我希望用户能够简单地应用 一个简单的patch应用程序会很好 在文件上运行 diff 只是给出Binary files differ 查看bsdiff and bspatch website http
  • 无法在 Windows 的多处理环境中“pickle”Tkinter 对象

    我正在尝试创建一个应用程序 其中 Tkinter GUI 由不断获取数据的其他对象更新 我在使用多线程时遇到问题 因此我决定尝试使用多处理模块 我发现您无法在其中运行 Tkinter 窗口multiprocessing Process 这是
  • 将类添加到单选按钮

  • Python:为什么 IDLE 这么慢?

    IDLE http en wikipedia org wiki IDLE Python 是我最喜欢的 Python 编辑器 它提供了非常漂亮且直观的 Python shell 对于单元测试和调试非常有用 并且还提供了一个简洁的调试器 然而
  • 使用 DRF 中序列化器字段的子集反序列化 POST 请求

    我遇到了一个相当简单的问题 但找到了一些解决方案 并且不停地想知道预期的 DRF 方法是什么 我有一个 简化的 模型和序列化器 如下所示 class CartProduct models Model cart models ForeignK
  • 如何控制knitr kable科学记数法?

    我有一个像这样的数据框 gt summary variable value 1 var1 5 810390e 06 2 var2 5 018182e 06 3 var3 5 414286e 06 4 var4 3 000779e 02 5
  • 如何以可移植的方式验证 ANSI C 的标准输入缓冲区中是否有某些信息?

    我正在尝试用 ANSI C 开发一个可移植函数来验证标准输入缓冲区是否为空 这个想法是用它来验证用户是否按下了某个键 在 Windows 中 使用 kbhit 来自 conio h 很容易做到这一点 但它依赖于操作系统 不过 我想开发自己的
  • Xcode 6 本地化无法读取字符串文件

    Xcode 无法生成 xliff 本地化文件并出现错误本地化无法读取字符串文件 请检查系统日志以获取更多详细信息 有谁知道我在哪里可以找到这些日志 它是 Xcode 6 3 2 GM 但我也尝试过 6 3 1 版本 同 6 3 1 错误发生
  • 能否为一种 XAML 样式定义多个 TargetType?

    在 HTML CSS 中 您可以定义可应用于多种类型元素的样式 例如 highlight color red 可以应用于 P 和 DIV 例如 p class highlight this will be highlighted p div
  • 为什么C的数据段被分成两部分?

    所有全局初始化值都存储在 data段 即已初始化的数据段和未初始化的值存储在bss编译器将这些未初始化的值自动初始化为零bss Then why data段被分隔为 data and bss 是否有优势 或者有什么好处 C 编程语言 它是用
  • Xcode 在 Swift 2.2 和 Swift 3.0 之间切换

    自从我下载了新的 Xcode 并转换 更新了我的语法以来 Xcode 一直在上述 Swift 版本之间随机切换 我在终端中运行了 swift version 它确认 目前 我正在运行 Swift 2 2 我看到这个问题 Swift 编译器混
  • Semaphore.wait(timeout: .now()) 的目的是什么?

    看了一些苹果代码示例 我发现了这一点 func metadataOutput output AVCaptureMetadataOutput didOutput metadataObjects AVMetadataObject from co
  • “sdist”.tar.gz 发行版和 python Egg 有什么区别?

    我有一点困惑 似乎有两种不同类型的 Python 包 源代码发行版 setup py sdist 和 Egg 发行版 setup py bdist egg 两者似乎只是具有相同数据 Python 源文件 的档案 一个区别是pip最推荐的包管
  • 可扩展列表视图未扩展

    您好 需要像这样准备屏幕 这是我的可扩展列表视图的代码 适配器类 新适配器 java public class NewAdapter extends BaseExpandableListAdapter public ArrayList
  • libicuuc.so.55:无法打开共享对象文件

    当我使用 swift build 进行编译时 我的 Ubuntu 机器上出现以下错误 swift build home xxxxxxxxx Downloads swift DEVELOPMENT SNAPSHOT 2016 02 25 a
  • 是否可以使用 ES6/Babel 进行多个类导入?

    我正在开发一个反应项目 我的第一个项目 最近我重组了我的文件夹结构以使其更有意义 为了让我的生活更轻松 在我的组件文件夹中 我有一个index js文件如下所示 export from App export from Home export
  • 如何使用 compose 将 docker 卷安装到我的 docker 项目中?

    我有一个 Maven 项目 我正在 Docker 内运行 Maven 构建 但问题是 每次运行它时 它都会下载所有 Maven 依赖项 并且不会缓存任何 Maven 下载 我找到了一些解决方法 将本地 m2 文件夹挂载到 Docker 容器
  • 如何在输入数字时在数字输入字段中添加破折号?

    我正在尝试使用 javascript 将破折号插入到 html 数字字段中4th输入时输入数字 我在模糊中执行此操作 而不是在按键 按键上等中执行此操作 但是当我尝试将功能更改为on key press on key up事件它没有给出预期
  • 将耗时的进程从我的 ASP.NET 应用程序中移走

    我的 Asp net 应用程序生成动态 pdf 有时这需要一段时间 并且是一个相当繁重的过程 实际上我不希望我的用户等待pdf 只需在生成后将其发送到那里的邮件即可 所以我尝试了网络服务 我将一个 id 从数据库获取数据 和一些字符串传递给
  • AngularJS:使用控制器和 ng-repeat 重新加载 div 上的数据

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