程序员经验分享-hwhale

将 Ajax 数据获取到 Angular 网格中

2024-01-28

使用 Angular Grid，我在 console.log 中获取 ajax 数据。但是一个空的网格。

控制台日志显示：

[13:56:11.411] now!!
[13:56:11.412] []
[13:56:11.412] now!!
[13:56:11.556]  <there is data returned from console.log(getData); >

这是js文件。

// main.js
var app = angular.module('myApp', ['ngGrid']);

var getData = [];

function fetchData() {
    var mydata = [];

    $.ajax({
        url:'/url/to/hell',
        type:'GET',
        success: function(data) {

            for(i = 0, j = data.length; i < j; i++) {
                mydata[i] = data[i];
            }
            getData = mydata;
            console.log(getData);
        }
    });    
 }
fetchData();     


app.controller('MyCtrl', function($scope) {    

    console.log('now!!')
    console.log(getData)
    console.log('now!!')

    $scope.myData = getData


    $scope.gridOptions = { 
        data: 'myData',
        showGroupPanel: true
    };
});

新建Js文件：

// main.js

var app = angular.module('myApp', ['ngGrid']);

app.controller('MyCtrl', function($scope, $http) {          
function fetchData() {
    $http({
        url:'/url/to/hell',
        type:'GET'})
        .success(function(data) {
            $scope.myData = data;       
            $scope.gridOptions = { 
                    data: 'myData',
                    showGroupPanel: true
                };              
        });         
}   
fetchData();    
});

HTML 文件。

<html ng-app="myApp">
        <head lang="en">
            <meta charset="utf-8">
            <title>Blank Title 3</title>  
            <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
            <link rel="stylesheet" type="text/css" href="../static/css/style.css" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
            <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
            <script type="text/javascript" src="../static/js/main.js"></script>
        </head>

        <body ng-controller="MyCtrl">

            <div class="gridStyle" ng-grid="gridOptions"></div>
        </body>
    </html>

如果您为您的请求定义了一个服务，这会更容易（并且更有角度）。沿着这些思路：

angular.module('hellServices', ['ngResource'])
  .factory('Hell', function ($resource) {
    return $resource('URL/TO/HELL', {}, {
      query: { method: 'GET' }
    });
  });

确保将其包含在您的应用程序中：

var app = angular.module('myApp', ['ngGrid', 'hellServices']);

然后你可以在你的控制器中得到它的承诺：

app.controller('MyCtrl', function($scope, $http, Hell) {  
$scope.myData = Hell.query();

然后设置网格选项以查看其数据的承诺（就像您已经做的那样）：

$scope.gridOptions = { 
    data: 'myData',
    showGroupPanel: true
};

如果你这样做，你不必担心 $scope.$apply 因为它会为你处理。这更干净且更容易遵循。如果您仍然需要回调来修改从服务器返回的数据，请将函数传递给query()您的服务功能：

...
$scope.myData = Hell.query(function(hell) {
    // code that modifies 'hell'
});

查看官方文档 https://docs.angularjs.org/guide/services关于 Angular 服务。基础知识也包含在Step #11 http://docs.angularjs.org/tutorial/step_11Angular JS 官方教程。

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

javascript

angularJS

nggrid

将 Ajax 数据获取到 Angular 网格中 的相关文章

  • 使用 javascript 调用 ViewComponent

    我有一个带有几个视图组件的网页 当我单击这些组件时 我会为其打开一个简单的编辑器 请参见下图 如果我编辑文本并按 Enter 键 我想重新渲染视图组件而不是孔页面 是否可以使用 javascript 调用视图组件来获得此行为 通过更新 您现

  • 如何制作像Stackoverflow一样的可折叠评论框

    我正在构建一个网站 并且有一个状态更新列表 我希望允许用户为列表中的每个项目撰写评论 但是我正在尝试实现一个类似于堆栈溢出工作方式的用户界面 特别是可折叠的评论表单 列表 用户在其中单击对列表中的特定状态更新添加评论 并且在列表中的该项目下

  • 记录jQuery中调用的方法和参数

    假设我有 jQuery 并且加载了几个插件 我运行一些这样的代码 someSelector someMethod someParam someOtherParam someOtherSelector someOtherMethod anot

  • 在 AngularJS 中动态显示图像

    我正在使用http请求从数据库获取图像的路径 并且图像位于服务器中 我想在 img src 中显示该图像 这是代码 http url user profile exec php method GET params uid user id s

  • 一个 Next.js 路由中的两个不同子域

    我想使用构建一个新平台Next js https nextjs org React js https reactjs org and 反应路由器 https reacttraining com react router web guides

  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右

  • React：React 如何确保在浏览器有机会绘制之后调用 useEffect？

    useLayoutEffect 的文档说 useLayoutEffect 内计划的更新将被刷新 在浏览器有机会绘制之前同步进行 useEffect 的文档说 与 componentDidMount 和 componentDidUpdate

  • 为什么我的 onclick 事件自动触发

    加载页面时最初显示 Hello World 我希望它仅在单击按钮后显示 我知道我可以通过向按钮添加内联事件侦听器来做到这一点 我可以只用脚本编写所有这些代码吗

  • 如何向尚未添加到页面的元素注册 Javascript 事件处理程序

    我正在尝试构建一个greasemonkey 脚本 它将根据用户与其他动态创建的数据表的交互动态创建数据表 我的问题是 每次创建表时 我都必须进行两次传递 一次用于创建表 另一次用于获取表中我想要添加事件处理程序的所有对象 通过 id 并添加

  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我

  • 对数字和字母元素的数组进行排序（自然排序）

    假设我有一个数组 var arr 1 5 ahsldk 10 55 3 2 7 8 1 2 75 abc huds 我尝试对其进行排序 我得到了类似的东西 1 1 10 2 2 3 5 55 7 75 8 abc ahsldk huds 注

  • Web浏览器控件：如何捕获文档事件？

    我正在使用 WPF 的 WebBrowser 控件加载一个简单的网页 在这个页面上我有一个锚点或一个按钮 我想在我的应用程序后面的代码中 即在 C 中 捕获该按钮的单击事件 WebBrowser 控件是否有办法捕获加载页面元素上的单击事件

  • 如何为 ng-repeat orderBy 创建回调？

    寻找一种方法让 AngularJS 的 ng repeat orderBy 过滤器在完成渲染后执行回调 Markup div table thead tr th Name th th Age th tr thead tbody tr tr

  • 如何使用 .append() 将 React 组件附加到 HTML 元素

    我正在尝试对我的博客实现无限滚动 我有 const articlesHTML document querySelector articles 作为容器 每次点击装载更多按钮 我想将新文章附加到主 html 元素 如下所示 const res

  • 获取 2 个日期之间的月份名称

    我有两个约会from and to 我想获取这两个日期之间的所有月份名称 以下是我的代码 var monthNames January February March April May June July August September

  • 响应式菜单：悬停子菜单显示错误

    简而言之 我根据教程创建了一个响应式菜单 当您将鼠标悬停在投资组合按钮上时 菜单应该显示子菜单 而在移动模式下 您需要按该按钮才能显示子菜单 效果很好 问题是该教程有一个错误 如果您在桌面模式下按组合按钮 子菜单将不会再次显示 除非您按 单

  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo

  • 如何在 jQuery 中检查复选框是否被选中？

    我需要检查checked复选框的属性 并使用 jQuery 根据选中的属性执行操作 例如 如果age复选框被选中 然后我需要显示一个文本框来输入age 否则隐藏文本框 但下面的代码返回false默认情况下 if isAgeSelected

  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div

  • 使用 stopPropagation() 处理 React 事件委托

    我有一个 React 项目 应该可以放置在任何网站上 我的想法是 我托管一个 javascript 文件 人们放置一个具有特定 ID 的 div 然后 React 在该 div 中进行渲染 到目前为止 除了点击事件之外 这是有效的 这些事件

随机推荐

热门标签