在Angular应用中加载JSON内容，具体取决于用户单击的项目 [英] Loading JSON content in Angular app, depending on what item the user clicked

问题描述

我有一个通过REST请求填充到 http://localhost:8080/Sprint002b/restpatent/的表.

I have a table populated by a REST request to http://localhost:8080/Sprint002b/restpatent/.

当用户单击表中位于 list-patents.htm 中的项目之一时，将显示另一个容器，位于 patent-item.htm code>，其中包含一个带有3个标签的标签面板，该标签面板需要显示JSON文件中与用户单击的项目相关的所有信息.

When a user clicks on one of the items in the table, which is located in list-patents.htm, a second container displays, located in patent-item.htm, which contains a tab panel with 3 tabs, which needs to show all information from the JSON file, relative to the item the user click.

我已阅读

I have read over How can I pull data (JSON) from a clicked ng-repeat item to load a new, item specific page using $stateParams and ui-router?, and have replicated the functionality provided, but I am now confused where to go.

通过单击表中的 ui-sref ，标签面板会加载到其下方的 ui-view ，但目前仅包含虚假内容.如何用JSON文件中与用户单击的项目相关的数据填充选项卡面板?道歉，如果这没有道理.

The tab panel loads from a click on a ui-sref in the table, to a ui-view below it, but only dummy content at the moment. How do I populate the tab panel with data from the JSON file, related to the item the user clicked? Apologies if this doesn't make sense.

list-patents.htm

<table class="table table-bordered table-striped text-md-center">
  <thead class="thead-inverse">
    <tr>
      <td ng-click="patentAppOrder()" class="align-middle">Application No. </td>
      <td class="align-middle">Client Ref</td>
      <td class="align-middle">Cost to renew</td>
      <td class="align-middle">Basket</td>
      <td class="align-middle">Remove</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in patents">
      <td><a ui-sref="patents.list.item">{{x.applicationNumber}}</a></td>
      <td ng-bind="x.clientRef"></td>
      <td ng-bind="x.costToRenew">$</td>
      <td ng-bind="x.renewalDueDate"></td>
      <td>
        <button type="button" class="btn btn-danger" ng-click="remove(x.id)">Remove</button>
      </td>
    </tr>
  </tbody>
</table>
<div ui-view></div>

patent-item.htm

<div id="tabs">
  <ul>
    <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
    <!--applies active to the returned tab url -->
  </ul>
  <div id="mainView">
    <div class="row">
      <div ng-include="currentTab"></div>
    </div>
  </div>
</div>
<script type="text/ng-template" id="patent-info.htm">
  <div class="col-md-6 text-xs-center">
    <h2>Application Number: <!--data to be loaded--></h2>
    <table class="table table-striped">
      <tbody>
        <tr>
          <td class="font-weight-bold">Short Name</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Client Reference</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Applicant Name</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Application Number</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Publication Number</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
        <tr>
          <td class="font-weight-bold">Title</td>
          <td>
            <!--data to be loaded-->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-md-6 text-xs-center">
    <!--data to be loaded-->
  </div>
</script>
<script type="text/ng-template" id="cost-analysis.htm">
  <!--data to be loaded-->
</script>
<script type="text/ng-template" id="renewal-history.htm">
  <!--data to be loaded-->
</script>

---

var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router', "chart.js"]);

app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $locationProvider, $urlRouterProvider) {

        $urlRouterProvider
          .when('', '/patents/list-patents')
          .when('/', '/patents/list-patents')
          .when('/patents', '/patents/list-patents')
          .when('/transactions', '/transactions/current-transactions')
          .otherwise('/patents/list-patents');

        $stateProvider
          .state("patents", {
            url: "/patents",
            templateUrl: "templates/patents/patent-nav.htm",
            controller: "patentCtrl"
          })
          .state("patents.list", {
            url: "/list-patents",
            templateUrl: "templates/patents/list/list-patents.htm",
            controller: "patentCtrl"
          })
          .state("patents.list.item", {
            url: "/patent-item",
            templateUrl: "templates/patents/list/patent-item.htm",
            controller: "patentCtrl"
          })


        app.controller('patentCtrl', ['$scope', '$http', 'patentTabFactory', 'loadPatents', '$stateParams', 'patentService', function($scope, $http, patentTabFactory, loadPatents, $stateParams, patentService) {

          patentService.items.then(function(patents) {

            $scope.items = patents.data;
            console.log($scope.patents);
            $scope.patents = patents.data[patentService.getPatentItem($scope.items, "aid", $stateParams.id)];

          });
        }]);

推荐答案

您可以传递状态如下的数据

You can pass the data with state like below

$state.go('patents', {
  'projectId': projectId,
  'otherdata': otherdata
});

您的路由器将如下所示

$stateProvider
  .state("patents", {
    url: "/patents/:parentId/:otherdata",
    templateUrl: "templates/patents/patent-nav.htm",
    controller: "patentCtrl"
  })

您可以像这样在下一个控制器中获取值

And you can get values in next controller like this

var projectId = $state.params.projectId;
var otherdata = $state.params.otherdata;

这篇关于在Angular应用中加载JSON内容，具体取决于用户单击的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！