AngularJS bind to dynamic html

Question

given this jsfiddle: http://jsfiddle.net/HB7LU/1356/

I have an array of objects retrieved from my service. I then build an html string with links created around those items that exist in the array. I want the click handler to be bound directly to item in the array. The behavior I'm after is the way an object can be passed directly into a ngClick when used within a ngRepeat.

//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>';

UPDATE: i added the rawString to the controller. I considered the suggestion below to just use ngRepeat over termsToBindTo but my view must present the links just as rawString looks. In other words I cannot just provide a list of termsToBindTo. The view has to provide the links with any formatting or punctuation that exist in rawString.

package · Accepted Answer · 2013-12-16 15:08:37Z

1

Updated JsFiddle

You can use whatever punctuation and display format you need with ngRepeat and couple of nested 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>

answered Dec 16, 2013 at 15:08

package

4,8011 gold badge28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zach Larson Over a year ago

thanks! i didn't do exactly what you described but it got me to my answer.

Alexandre Nucera · Accepted Answer · 2013-12-16 14:46:02Z

0

I'm not sure I understand what you want but you should use ng-repeat :

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

answered Dec 16, 2013 at 14:46

Alexandre Nucera

2,2232 gold badges22 silver badges34 bronze badges

1 Comment

Zach Larson Over a year ago

I did consider this but it doesnt work with my requirements. please see updated questions.

Zach Larson · Accepted Answer · 2013-12-16 17:23:46Z

0

Thanks to @package I ended up ripping the string into pieces:

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]

then ngRepeat over them with a ngSwitch on a property that exists on each object in the above array to either show an href or static text.

answered Dec 16, 2013 at 17:23

Zach Larson

471 silver badge5 bronze badges

Collectives™ on Stack Overflow

AngularJS bind to dynamic html

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related