双引号之间包含的angularjs数据未按预期显示

时间:2015-06-04 23:29:19

标签: javascript angularjs

美好的一天,

我有一个简单的angularjs应用程序,只是想得到它的基础知识,我在一本书中读到,即使双引号之间有一个角度数据,它也会按预期显示,所以我在这里尝试的是代码:

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

在这行代码中查看信息pid包含在双引号之间且应用程序运行良好但是当我尝试单击链接时应该打开ViewInfo / pid但是pid部分缺失

我错过了什么吗?

提前谢谢

2 个答案:

答案 0 :(得分:1)

对于angularjs来说,你需要使用ng-href

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

引用文档:

  

在href属性中使用像{{hash}}这样的Angular标记将会成为   如果用户在Angular拥有之前单击它,则链接将转到错误的URL   有机会用它的值替换{{hash}}标记。直到Angular   替换标记链接将被破坏并且很可能   返回404错误。 ngHref指令解决了这个问题。

请参阅https://docs.angularjs.org/api/ng/directive/ngHref

答案 1 :(得分:0)

事实是,你的问题与ngHref无关,正如所接受的答案所暗示的那样,而仅仅是你如何尝试使用绑定变量。

这会奏效:

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

您的问题是您尝试连接字符串而不是将值直接放入href属性中的引用值。

但是,尽管如此,使用ngHref总是更安全,如接受的答案所示。