CODEWITHSUNDEEP
javascriptangularjs
angelogogo
angelogogo

Reputation: 723

angularjs data enclosed between double quotes is not displaying as expected

Good Day,

i have a simple angularjs app and just want to get the basics of it i read in a book that even if an angular data is enclosed between double quotes it will display as expected so i tried it here is the code:

<table class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Fname</th>
                                <th>Mname</th>
                                <th>Lname</th>
                                <th>Qualifier</th>
                                <th>Alias</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="i in person">

                            <tr>
                                <td>{{i.fname}}</td>
                                <td>{{i.mname}}</td>
                                <td>{{i.lname}}</td>
                                <td>{{i.qualifier}}</td>
                                <td>{{i.alias_}}</td>
                                <td><a href="/ViewInfo/{{i.pid}}"><i class="fa fa-pencil-square-o"></i>View Information</a></td>
                            </tr>
                        </tbody>
                    </table>

in this line of code View Information the pid is enclosed between double quotes and the application is running well but when i tried to click the link this should be opened ViewInfo/pid but the pid part is missing

am i missing something?

thank you in advance

Upvotes: 0

Views: 240

Answers (2)

Michael Oryl
Michael Oryl

Reputation: 21662

The truth is that your problem has nothing to do with ngHref, as the accepted answer suggests, but merely with how you are trying to use the bound variable.

This would have worked:

<a href="/ViewInfo/{{i.pid}}">

Your problem was that you you were trying to concatenate strings instead of having the value put directly into the quoted value in the href attribute.

But, with all that said, it is always safer to use ngHref like shown in the accepted answer.

Upvotes: 0

bakkal
bakkal

Reputation: 55448

For angularjs to do that, you need to use ng-href

<a ng-href="/ViewInfo/{{i.pid}}">...

To quote the doc:

Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

See https://docs.angularjs.org/api/ng/directive/ngHref

Upvotes: 1

Related Questions