Question

我有一个填充了http://localhost:8080/Sprint002b/restpatent/的REST请求的表。

当用户点击位于list-patents.htm的表格中的某个项目时，会显示位于patent-item.htm的第二个容器，其中包含一个带有3个标签的标签面板，显示JSON文件中的所有信息，相对于用户单击的项目。

我已阅读How can I pull data (JSON) from a clicked ng-repeat item to load a new, item specific page using $stateParams and ui-router?，并已复制所提供的功能，但我现在很困惑。

选项卡面板从表格中的ui-sref点击加载到其下方的ui-view，但目前仅加载虚拟内容。如何使用JSON文件中的数据填充选项卡面板，该数据与用户单击的项目相关？如果这没有意义，请道歉。

列表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>

专利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)];

          });
        }]);

Answer 1

您可以使用以下状态传递数据

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

您的路由器将如下所示

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

你可以在下一个控制器中获得像这样的值

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

在Angular应用程序中加载JSON内容，具体取决于用户单击的项目

1 个答案: