Question

我刚开始使用Angular，所以我真的不确定如何解决这个问题。

我导入一个私人邮件列表（来自Mongo），其中有一个收件人子对象，格式如下：

"recipients": [{
    "userID": 1,
    "username": "User1",
    "read": false
},
{
    "userID": 2,
    "username": "User2",
    "read": false
}]

我想将它们格式化为用户链接：<a href="/user/1/">User1</a>, <a href="/user/2/">User2</a>

我不确定如何在视图中直接执行此操作，因此我想将其添加到$ http函数中的控制器：

var recipientList = new Array();
value.recipients.forEach(function(value, key) {
    recipientList.push("<a href=\"/user/" + value.userID + "/\" class=\"username\">" + value.username + "</a>");
});
data[key].recipients = recipientList.join(', ');

但是当我显示它{{pm.recipients}}时，它会显示为字符串而不是HTML。

我一直在考虑将其包装在一个范围内，然后在标签中使用ng-repeat，但我不知道如何让它在它们之间显示逗号，但不是在最后

么？这应该在视图逻辑或控制器逻辑上吗？

Answer 1

您永远不需要在控制器中编写任何类型的标记。指令适用于DOM操作。在这种情况下，您只需要使用一些数据绑定和内置指令：

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  $scope.recipients = [{
    "userID": 1,
    "username": "User1",
    "read": false
  },
  {
    "userID": 2,
    "username": "User2",
    "read": false
  }];
})
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <a ng-repeat="user in recipients" ng-href="/user/{{user.userID}}/">
    {{user.username}}{{!$last ? ',' : ''}}
  </a>
</div>

ng-repeat遍历收件人数组，为每个收件人创建标记。

ng-href只会延迟href属性的应用，直到数据可用为止，这比在href标记中直接数据绑定更好。

对于逗号，您只需使用$last中提供的ng-repeat变量即可。你可以通过几种方式做到这一点。我喜欢{{!$last ? ',' : ''}}，它只是三元组“如果不是最后一项，请绑定一个逗号，否则，什么都不绑定。”

您的标记作为字符串出现的原因是因为数据绑定只会将所有内容显示为字符串。要将字符串绑定为HTML，必须使用ng-bind-html指令。但是，Angular默认情况下不信任HTML，除非您使用$sce服务专门允许它，否则不会绑定它。这是一项任务，但就像我说的那样，无论如何你都不需要它。

回复你的评论，将逗号取出锚：

<div ng-repeat="user in recipients">
  <a ng-href="/user/{{user.userID}}/">{{user.username}}</a>
  <span ng-if="!$last">,</span>
</div>

重复用户数组作为逗号连接的链接，不带尾随逗号

1 个答案: