How to concatenate attributes in angularjs?

Question

I want to show the following attributes as a comma separated list in html:

json {
    "city":"<b>londo</b>",
    "country":"<i>uk</i>",
    "zip":"123"
}

As I have to render the html markup, I'm using ngSanitize. Also I have to apply a filter on each element.

If only one element would be shown, I'd write:

<h3 ng-bind-html="data.country | touppercase"></h3>

But how can I create a oneline comma separated list? How can I append just the three attributes in the h3? If I'd just use three h3 tags one after the other, I'd have linebreaks between them. So what else could I do?

Probably easier to do in the controller code, $scope.joined = Object.keys(json).map(function(key) { return json[key] }).join(","); — tymeJV
– tymeJV, Commented Aug 7, 2015 at 15:50
Yes but I'd like to avoid a controller mapping here, I'm just looking for a html way to concatenate them. — membersound
– membersound, Commented Aug 7, 2015 at 15:51
You could make a $scope method that returns the joined list, and then use ng-bind-html="getJoinedList(data.country) | touppercase" — tymeJV
– tymeJV, Commented Aug 7, 2015 at 15:52
You can resolve it with CSS (I recomend you use ul and li instead h3) check that: css.maxdesign.com.au/listamatic/horizontal01.htm — Exos
– Exos, Commented Aug 7, 2015 at 15:56
@tymeJV and how could I feed the getJoinedList with the different attributes? — membersound
– membersound, Commented Aug 7, 2015 at 15:56

membersound · Accepted Answer · 2015-08-07 16:14:20Z

1

Attributes and filters can be concatenated directly withint the angularjs tags:

<h3 ng-bind-html="(data.country | touppercase) + ', ' + (data.city | touppercase) + ', ' + (data.zip)"></h3>

answered Aug 7, 2015 at 16:14

membersound

87.9k222 gold badges689 silver badges1.2k bronze badges

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

Collectives™ on Stack Overflow

How to concatenate attributes in angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related