角JS -取决于单击项的变化状态

Question

我想从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

我上周问过这个问题，但没有得到回应，因为我想我说得不太清楚。我使用ui-view来显示内容，并且状态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>

Answer 1

您首先要做的是向路由添加一个动态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+，也可以使用组件。要了解有关组件的更多信息，请参阅见正式文件。