使用AngularJS将URL的ID更改为特定名称

Question

I'm using AngularJS for my project. I'm creating a forum where there are many qualification levels and subjects for each qualification. Levels with type id of "F": Elementary 1, Elementary 2, Elementary 3 etc. Subjects with type id of "D": English, Maths, Science etc. All has their own unique ID and the ID of each level is linked to the parentID of Subjects. When i click on Elementary 1, the id of E1 will be passed and all subjects with parentID of E1 will be displayed. So now the question, the URL of my website: http://127.0.0.1:8080/#!/discussionlist shows the forum homepage. When i click on Primary 1, it goes to: http://127.0.0.1:8080/#!/discussionlist/4a6f8ec4-1441-4ccc-ad4b-59fc03ca5147 When i click on English, it REPLACES the 1st id to the id of English: What i'm trying to achieve is to change the unique ID to the title of what i click on( http://127.0.0.1:8080/#!/discussionlist/Primary1 ), and to append the URL to be something like ( http://127.0.0.1:8080/#!/discussionlist/Primary1/English ). This is the code for changing the URL:

    $scope.titleClicked = function (id,title){
    currentID = id
    $scope.discussiontopics.splice(0);

    console.log(id);
    $location.path("/discussionlist/" + id);


}

Route.js:

   .when("/discussionlist", {
    controller: "discussionlistController",
    templateUrl: "src/functions/discussion-list/template.html"
})
.when("/discussionlist/:parentid", {
    controller: "discussionlistController",
    templateUrl: "src/functions/discussion-list/template.html"
})

HTML:

<div ng-controller="discussionlistController">
<div align="center" style="width: 100vw; ">
    <div class= "row content" align="left">
        <md-input-container>
            <div id="breadcrumb">
                <a href="/">Home</a> > <a href="http://127.0.0.1:8080/#!/discussionlist">Level</a> > <a href="">{{o.title}}</a> 
            </div>
            <!-- Add a short description here -->
            <div class="description">
                <p> {{ shortdescription }} </p>
            </div>
            <br />
            <!-- Add a table of contents here -->
            <div class="content-table">
                <table class="lay" md-table>
                    <tr md-row>
                        <td md-cell>Forum</td  md-cell>
                        <td  md-cell>Post</td  md-cell>
                    </tr md row>
                    <tr md-row ng-repeat="o in discussiontopics">
                        <td md-cell>
                            <a class="main-topic" ng-click="titleClicked(o.id,o.title)" aria-label="{{o.title}}">{{o.title}}</a>      
                            <p class="sub-topic">{{o.description}}</p>
                        </td md-cell>
                        <td md-cell>
                            <p></p>
                            <p class="sub-topic">{{}}</p>
                        </td md-cell>
                    </tr md-row>
                </table>
            </div>
            <div class="errormsg">
                <p>{{ error }}</p>
            </div>
        </md-input-container>   
    </div>
</div>

The thing is that there are 2 different IDs, so i have to change my id to maybe something like parentID & childID? I'm sorry I'm not that good in explaining, the gist of the question is how to change the id to the name & making it a relative URL. Thank You!

Answer 1

From what I understand instead of passing your id as url param you can use what you need /english /somethingelseyouneed as url param. ie. you can use $stateParam to pass your id and not use it on url.

.state(somestate.state, { url: '/path', controller: 'controller', params: { someParam: null}, controllerAs: 'vm', data: neededData }

You can also use 'data' and pass in from state change. I am not sure if that helps. But good luck.