Question

给出这个jsfiddle：http://jsfiddle.net/HB7LU/1356/

我从我的服务中检索了一系列对象。然后我构建一个html字符串，其中包含围绕数组中存在的那些项创建的链接。我希望单击处理程序直接绑定到数组中的项目。我所追求的行为是在ngRepeat中使用对象直接传递到ngClick的方式。

//these were retrieved from a service first
$scope.termsToBindTo = [
    {name: 'test 1', active: false },
    {name: 'test 2', active: false },
    {name: 'test 3', active: false }];

$scope.rawString = 'test 1, test 2, and test 3';    

//then this html string was built after termsToBindTo is populated
$scope.myHTML = '<a href="#" ng-click="itemClicked(item)">test 1</a>, <a href="#" ng-click="itemClicked(item)">test 2</a>, and <a href="#" ng-click="itemClicked(item)">test 3</a>';

更新：我将rawString添加到控制器。我考虑下面的建议只是使用ngTpeT在termsToBindTo，但我的视图必须像rawString看起来一样呈现链接。换句话说，我不能只提供一个条款列表ToBindTo。视图必须提供rawString中存在的任何格式或标点符号的链接。

Answer 1

更新了JsFiddle

您可以使用ngRepeat和几个嵌套spans所需的标点符号和显示格式：

<span data-ng-repeat="term in termsToBindTo">
    <a href="#" data-ng-click="itemClicked(term)">{{term.name}}</a><span ng-show="$index == termsToBindTo.length - 2">, and </span><span ng-show="$index < termsToBindTo.length - 2">, </span>
</span>

Answer 2

我不确定我理解你想要什么，但你应该使用ng-repeat：

<div data-ng-repeat="term in termsToBindTo">
 <a href="#" data-ng-click="itemClicked(term)" data-ng-bind="term.name"></a>
</div>

Answer 3

感谢@package，我最终将字符串翻录成碎片：

test 1, test 2, test 3, and test 4
[0] --> [test 1]
[1] --> [, ]
[2] --> [test 2]
[3] --> [, ]
[4] --> [test 3]
[5] --> [, and ]
[6] --> [test 4]

然后在上面数组中每个对象上存在的属性上使用ngSwitch对它们进行ngRepeat，以显示href或静态文本。

AngularJS绑定到动态html

3 个答案: