CODEWITHSUNDEEP
javascriptangularjs
anam
anam

Reputation: 3913

ng-model to append element in dom not as string

I am trying to take value from inputbox and then dynamicaly append that value in DOM as html element , but ng-model append it as string .

for example ,

<p> para </p>

this should append as HTML element not string .

**Note :: I tried using ng-model but it render as a String hence i dont see any h1 element tag instead what i see is full "

Hello

"

Fiddle ::**

http://jsfiddle.net/simmi_simmi987/Z9vN8/

Code ::

   <h1>Comment Box</h1>

   <div class="col-md-6 col-md-offset-3">
    <div class="well well-sm">
      <form class="form-horizontal" action="" method="post">
      <fieldset>
        <legend class="text-center">Style Title Bar </legend>

        <!-- Height input-->
        <div class="form-group">
          <label class="col-md-3 control-label" for="name">Title-Bar Height</label>
          <div class="col-md-9">
            <input type="text" placeholder="Title-Bar Height" class="form-control" ng-model="title_height">
          </div>
        </div>

        <!-- Color input-->
        <div class="form-group">
          <label class="col-md-3 control-label" for="email">Title-Bar Color</label>
          <div class="col-md-9">
            <input type="text" placeholder="Title-Bar Color" class="form-control" ng-model="title_bgcolor">
          </div>
        </div>

         <legend class="text-center">Style Box :</legend>

        <!-- Message body -->
        <div class="form-group">
          <label class="col-md-3 control-label" for="message">Your comment</label>
          <div class="col-md-9">
            <textarea class="form-control" ng-model="dynamic_comment" name="message" placeholder="Please enter your comment here..." rows="5"></textarea>
          </div>
        </div>

        <!-- Height input-->
        <div class="form-group">
          <label class="col-md-3 control-label" for="name">Box Height</label>
          <div class="col-md-9">
            <input type="text" placeholder="Box Height" class="form-control" ng-model="box_height">
          </div>
        </div>

        <!-- Color input-->
        <div class="form-group">
          <label class="col-md-3 control-label" for="email">Box Color</label>
          <div class="col-md-9">
            <input type="text" placeholder="Box Color" class="form-control" ng-model="box_bgcolor">
          </div>
        </div>

        <!-- Form actions -->
        <div class="form-group">
          <div class="col-md-12 text-right">
            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
          </div>
        </div>
      </fieldset>
      </form>
    </div>
  </div>


    <div class="col-md-offset-3 col-md-7">
     <div class="panel panel-default">
        <div class="panel-heading"  ng-style="{height:title_height,backgroundColor:title_bgcolor}">
          <h3 class="panel-title">Panel title</h3>
        </div>

        <div class="panel-body"  ng-style="{height:box_height,backgroundColor:box_bgcolor}">
          Reading Comment  ::<br/>
          {{dynamic_comment}}
        </div>
    </div>


  </div>



  </div><!-- row closed -->
</div> <!-- Container closed  -->

Upvotes: 0

Views: 119

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

You need to include ngSanitize (located in angular-sanitize.js) and then use ng-bind-html, as:

<span ng-bind-html="dynamic_comment"></span>

The sanitizer will forbid some elements and will complain while you are typing and the HTML content is incomplete (e.g. unclosed tags). You will have to handle this somehow.

Also check out ngBindHtml and the relevant SCE documentation.

See forked fiddle: http://jsfiddle.net/vH447/ (and check the external resources where angular-sanitize.js is included).

Upvotes: 2

Related Questions