Apply <strong> tags to a string in my js.coffee file

Question

I am currently using Angular and Slim in my Ruby On Rails Project. I have an array of questions in my js.coffee that are currently being rendered in my view.

One of the strings in the array has strong tags, but it is not being displayed properly in my html.

Instead of getting Standard, I get this...

On which Playfield is the <strong>Standard</strong> game played ?

I am fairly new to angular, what am I missing?

JAVASCRIPT

game_create_ctrl.js.coffee

angular.module('OombangularApp').controller 'GameCreateCtrl', [
  '$scope', '$sce', '$uibModal', 'Game', 'GameFormat', 'PlayfieldType', 'Persona',
  ($scope, $sce, $uibModal, Game, GameFormat, PlayfieldType, Persona) ->

    $scope.step = 1

    ###This works...when it is not an Array
    $scope.html = "On which Playfield is the " + "<strong>Standard</strong>" + " game played ?"
    $scope.stepQuestion = $sce.trustAsHtml($scope.html)        

    ###How do I show the <strong> tags in my view when its an array?

    $scope.stepQuestions = ['What should this Game be called?', 'What should this Game be called?',
                        'What category does this Game belong to?',
                        'On which Playfield is the <strong>Standard</strong> game played ?',
                        'What is the Player Configuration?', 'How is a <strong>Standard</strong> game won?', 'Which Persona owns this Game?']

]

    $scope.stepQuestions = $scope.stepQuestions.map (item) -> $sce.trustAsHtml(item)

VIEWS

new.html.slim

form[name='gameCreateForm' ng-controller='GameCreateCtrl']

    ###This Works
    .question ng-bind-html="stepQuestion"{{ stepQuestion }}

    ###This doesnt
    .question ng-bind-html="stepQuestions"{{ stepQuestions[step - 1] }}

Openfaced

Don't know if you could use ng-bind-html? – Dahlia

ng-bind-html? @Dahlia I am not familiar with what you are suggesting. fairly new to this... – Openfaced

Are you using angular 2? And is it html view? – Dahlia

@Dahlia i got it working with a string, just having a hard time doing it from an array. any ideas? – Openfaced

Answer 1

Please try: angularjs to output plain text instead of html (similar issue) or https://docs.angularjs.org/api/ng/directive/ngBindHtml

Anyhow

i've updated my code and got it working when its a simple string, would you know how I can fix it to work with an array? – Openfaced

You could map each string in that array the way you did with the simple string. Something like this: $scope.stepQuestions = $scope.stepQuestions.map (item) -> $sce.trustAsHtml(item) – Anyhow

how would that work with my view? Does that stay the same, because its not working and the tags still show up... – Openfaced

Have you tried putting it inside the brackets? You can even put it like this: ...Persona owns this Game?'].map (item) -> $sce.trustAsHtml(item) – Anyhow

yea i've tried adding that to the end as you suggested. not sure what it could be, but its not working either. everything prints on the view, but the tags are still present on the array value – Openfaced

I am not sure... In the documentation it is written: <p ng-bind-html="myHTML"></p> where myHTML is a scope variable. So in your view you should try to achieve the same result. Your tag must contain a variable's you want to bind name. Maybe even this could work: <p ng-bind-html="stepQuestions[0]"></p>. I cannot test it right now so I am just brainstorming. I hope you will find something helpful here. – Anyhow

OMG! thank you. adding stepQuestions[VALUE] did it for me. Thanks so much for your help. – Openfaced

Gal to help! Now you might even be able to clean up your code and get rid of any unnecessary iterations (like map and so on). The clue was in the view which I did not notice at first. Good luck. – Anyhow