Angular JS - Changing state depending on item clicked

Question

I want to display content beneath a table, from a JSON file, relative to to item the user clicked on in the table

Example:

JSON file

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

View - table

click on item 1 > DISPLAY price:$33, date:13/06

click on item 2 > DISPLAY price:$29, date:02/02

I asked this question last week but didn't get a response as I don't think I made it too clear. I'm using ui-view to display content, and it is the state patents.list.item URL that needs to be relative, dependent on what the user clicked on. Any ideas on how to achieve this?

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"
    })

Controller

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;
    }
}]);

---

list-patents view

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

patent item view

<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

What you have to do first is to add a dynamic URL parameter to the route which is supposed to display information about a selected patent and give it another controller.

.state("patents.list.item", {
    url: "/patent-item/:name",
    templateUrl: "templates/patents/list/patent-item.htm",
    controller: "patentDetailsCtrl"
})

Then when you are navigating to that patent, you have to include the name (assuming that is a unique identifier) in the link.

<td><a ui-sref="patents.list.item({ name: x.name })">{{x.applicationNumber}}</a></td>

After that in your patentDetailsCtrl, you can fetch information about the patent from the JSON file and display it.

Alternative Solutions

Another solution would be handle it in your patentCtrl without an additional (patents.list.item) route. But I would not recommend that approach.

You could also use components if you are using AngularJS v1.5+. To learn more about components, see the official documentation.