个人中心
gpt4 book ai didi

javascript - 通过单击表格元素加载数据

转载 作者：行者123 更新时间：2023-11-27 22:56:37 25 4
gpt4 key购买 nike

我有一个 API 可以向我发送一些数据。现在我正在为这个 API 制作 AngularJS 客户端。

所以，基本上，我有一个元素表。表中的每个元素都有指向标准 element.html 页面的 ui-sref 链接。同时，每个元素都有 ng-click 触发函数，获取具有该特定 id 的数据并将其放入 $scope.data 变量中。 element.html 页面从 $scope.data 获取数据并显示它。

据我所知。从 API 加载数据需要花费更多时间来加载页面，因此它不会显示正确的数据。

所以我对 JS 和 AngularJS 真的很陌生。谁能给我一些帮助吗？)

service.js

var service = angular.module('service', ['datatables']);

service.controller('DaraController', ['$http', '$scope', function ($http, $scope) {
$scope.data;
var configAuth = {
        headers : {
            'Content-Type': 'application/json',
            'Authorization': localStorage.getItem('token')
        }
    };
this.getData = function (id) {
        $http.get(urlAPI + '/data/' + id, configAuth).then(
            function success(response) {$scope.data = response.data;},
            function error(data) {console.log(data);}
        );
    };
  }]);

数据仪表板.html

<!DOCTYPE html>
<html lang="en" ng-app="grapes">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Data table</title>
</head>

<body>
<div ng-include="'header.html'"></div>
<div class="container-fluid">
    <div class="row">
        <div ng-include="'sidebar.html'"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">Data</h1>
        <div class="table-responsive" ng-controller="DataController as roleController">
                <table datatable="ng" class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>Name</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="data in dataController.datas()">
                        <td>{{data.id}}</td>
                    <td><a ui-sref="element" ng-click="dataController.getData(data.id)">{{data.name}}</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</body>
</html>

元素.html

<!DOCTYPE html>
<html lang="en" ng-app="grapes">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body class="container">

<div ng-include="'header.html'"></div>
<div ng-include="'sidebar.html'"></div>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="table-responsive" ng-controller="dataController as dataController">
        <div>
            <h1 class="sub-header">{{data.id}}. {{data.name}}</h1>
            <div ng-repeat="operation in data.operations">
                <p> - {{operation.name}}</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

UPD:也许有一种方法可以保持页面加载，直到函数完成获取数据？

app.js

(function () {
var app = angular.module('app',['service', 'ui.router']);

app.controller('AppController', function () {

});

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('data', {
            templateUrl: 'dataDashboard.html'
        })
        .state('element', {
            templateUrl: 'element.html'
        })
});

})();

最佳答案

为了确保在显示 element.html 页面时加载数据，您可以使用 $state.go() 方法而不是 ui-sref 属性。

直接使用此方法，例如:

function success(response) {
    $scope.data = response.data;
    $state.go('element');
}

它应该可以工作。(在这种情况下，不要忘记在 Controller 中注入(inject) $state)

关于javascript - 通过单击表格元素加载数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37547654/

25 4 0
文章推荐： python - 使用python脚本将文件夹中的所有图像转换为.webp
文章推荐： c++ - 强制 C++ 编译器警告对象的所有堆栈实例
文章推荐： C++ 初始化程序不断地在同一内存位置创建新对象
文章推荐： javascript - jQuery promise 模拟数组上函数的同步调用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com