Question

我有一个问题是使用ng-repeat创建超链接列表。我有user.spaces有一个对象数组，如

user.spaces is [
{device_name: 'phone1',
 id : '11111'
},
{device_name: 'phone2',
 id='22222'
]

and I want to create the list of device_name's hyper link like below
List of devices :

        phone1
        phone2

这是.html文件中的代码

<div ng-if="userController.inEdit" class="form-group">
  <label class="col-sm-4">{{'USER.WORKSPACE_USER' | translate}}:</label>
  <div class="col-sm-8">
    <tr ng-repeat="space in user.spaces track by $index">
      <td><a href ng-click="goToSpace(space)" id="linkSpaces_{{$index}}" >{{space.device_name}}</a></td>
    </tr>
  </div>
</div>

我没有得到我想要的结果，就像设备的超链接列表一样。任何建议，需要在.html文件中更改以使其工作提前致谢，金

Answer 1

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

您的代码中也缺少=运算符

<td><a id="linkSpaces_{{$index}}" href>{{space.device_name}}</a></td>

将其更改为

<td><a id="linkSpaces_{{$index}}" ng-href="reference">{{space.device_name}}</a></td>

编写错误的方法：

<a href="http://www.gravatar.com/avatar/{{hash}}">link1</a>

正确的写作方式：

<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>

请参阅https://docs.angularjs.org/api/ng/directive/ngHref以获得有关如何使用它的更好说明。

Answer 2

检查它。

JS：

$scope.user={ 
             spaces : [
                        { device_name: 'phone1', id : '11111' },
                        {device_name: 'phone2', id:'22222'}
                      ]
            };

$scope.goToSpace = function(oneDevice){
        console.log(oneDevice)    
    }

HTML：

<tr ng-repeat="space in user.spaces track by $index">
      <td><a href ng-click="goToSpace(space)" id="linkSpaces_{{$index}}" >{{space.device_name}}</a></td>
    </tr>

ng-repeat创建超链接

2 个答案: