我希望在JSON文件中显示表格下方的内容，相对于用户在表格中点击的项目
示例：
JSON文件
{
"patentInfo": [
{
"name": "item1",
"cost": "$33",
"date": "13/06",
},
{
"name": "item2",
"cost": "$29",
"date": "02/02",
}
]
}
查看表格
click on item 1 > DISPLAY price:$33, date:13/06
click on item 2 > DISPLAY price:$29, date:02/02
我上周问了question，但没有得到答复，因为我认为我没有说清楚。我正在使用ui-view来显示内容，而状态patents.list.item网址需要是相对的，具体取决于用户点击的内容。关于如何实现这一点的任何想法？
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)];
});
$scope.patent={id:null,applicationNumber:'',clientRef:'',costRenew:'',renewalDate:'',basketStatus:'', costEnd: '', nextStage:''};
$scope.patents=[];
$scope.submit = $scope.submit;
$scope.remove = $scope.remove;
$scope.fetchAllPatents = function(){
loadPatents.fetchAllPatents()
.then(
function(d) {
$scope.patents = d;
},
function(errResponse){
console.error('Error while fetching Users');
}
);
}
$scope.fetchAllPatents();
$scope.deletePatent = function(id){
loadPatents.deletePatent(id)
.then(
$scope.fetchAllPatents,
function(errResponse){
console.error('Error while deleting Patent');
}
);
}
$scope.submit = function() {
if($scope.patent.id===null){
console.log('Saving New User', $scope.patent);
loadPatents.createPatent($scope.patent);
}
console.log('User updated with id ', $scope.patent.id);
}
$scope.remove = function(id){
console.log('id to be deleted', id);
if($scope.patent.id === id) {//clean form if the patent to be deleted is shown there.
reset();
}
$scope.deletePatent(id);
}
$scope.tabs = patentTabFactory.tabs;
$scope.currentTab = patentTabFactory.currentTab;
// $scope.isActiveTab = patentTabFactory.isActiveTab();
$scope.onClickTab = function(currentTab) {
patentTabFactory.onClickTab(currentTab);
$scope.currentTab = patentTabFactory.currentTab;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == patentTabFactory.currentTab;
}
}]);
列表 - 专利视图
<div class="row">
<div class="col-md-12">
<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>
</div>
</div>
<div ui-view></div>
专利项目视图
<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</h2>
<table class="table table-striped">
<tbody>
<table>
<tr ng-repeat="(x, y) in patents">
<td ng-repeat="x.id in patents"></td>
<td>{{y.applicationNumber}}</td>
</tr>
</table>
</tbody>
</table>
</div>
<div class="col-md-6 text-xs-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
</div>
</script>
<script type="text/ng-template" id="cost-analysis.htm">
<div class="col-md-6 text-xs-center" ng-controller="LineCtrl">
<h2>Cost Analysis</h2>
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas>
</div>
</script>
<script type="text/ng-template" id="renewal-history.htm">
<div class="col-md-6 text-xs-center">
<h2>Renewal History</h2>
<p>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor..</p>
</div>
</script>
答案 0 :(得分：2)
首先要做的是在路线中添加一个动态URL参数，该路径应显示有关所选专利的信息，并为其提供另一个控制器。
.state("patents.list.item", {
url: "/patent-item/:name",
templateUrl: "templates/patents/list/patent-item.htm",
controller: "patentDetailsCtrl"
})
然后，当您导航到该专利时，您必须在链接中包含名称（假设这是唯一标识符）。
<td><a ui-sref="patents.list.item({ name: x.name })">{{x.applicationNumber}}</a></td>
在patentDetailsCtrl之后，您可以从JSON文件中获取有关该专利的信息并显示它。
替代解决方案
另一种解决方案是在patentCtrl处理它而不需要额外的（patents.list.item）路由。但我不建议采用这种方法。
如果您使用的是AngularJS v1.5 +，也可以使用组件。要了解有关组件的更多信息，请see the official documentation。