Javascript 角度JS-根据单击的项目更改状态

我想显示一个表下的内容，来自一个JSON文件，相对于用户在表中单击的项目

例如：

JSON文件

{
    "patentInfo": [
        {
            "name": "item1",
            "cost": "$33",
            "date": "13/06",
        },
        {
            "name": "item2",
            "cost": "$29",
            "date": "02/02",
        }
    ]
}

查看-表格

{
    "patentInfo": [
        {
            "name": "item1",
            "cost": "$33",
            "date": "13/06",
        },
        {
            "name": "item2",
            "cost": "$29",
            "date": "02/02",
        }
    ]
}

点击项目1>显示价格：$33，日期：13/06

点击项目2>显示价格：$29，日期：02/02

上周我问了这个问题，但没有得到回应，因为我觉得我说得不太清楚。我正在使用

ui视图

来显示内容，根据用户单击的内容，需要相对的是state

patents.list.item

URL。关于如何实现这一点有什么想法吗

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>

申请编号。
客户参考
续约费用
篮子
去除
{{x.applicationNumber}
$
去除

专利项目视图

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

{{tab.title}

申请编号
{{y.applicationNumber}
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务

成本分析
更新历史
在佩伦特式的福西布斯前庭。在NullaJusto的Nulla，eget luctus tortor

首先要做的是向路由添加一个动态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>

---

我建议您包括三个控制器和模板，您已经为它们定义了路线。我可以包括很多代码，但我认为更多的是试图找出实现此任务的逻辑。我现在就更新，你不必包括所有内容。只是与这个问题相关的部分。例如，现在我不知道你文章中的HTML属于哪个模板…谢谢你的解释和示例。请给我几分钟时间让这项工作顺利进行，等doneAll整理好后我会接受你的回答。再次感谢你！伟大的很乐意帮忙。