AngularJS adding text inside a

Question

In jQuery I can do something like the following to add desired text inside a div or any element.

$( "#div1" ).html( "<span class='red'>Hello <b>Again</b></span>" );

How can I do similar operation using AngularJS.

I need to add a plain text inside a div when the user clicks on a link.

Here's what I have tried:

View:

<a ng-click="showProductText($index)">Click Me</a>

ng-controller:

$scope.showProductText = function () {
   var myEl = angular.element(document.querySelector('#customerProductCatalogText'));
   --need help hence forth--
    };

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background — Alex, Aug 07 '14 at 08:32

score 6 · Answer 1 · answered Nov 21 '16 at 13:24

6

In view

<div style="border:1px solid #ccc;padding:10px;" ng-bind-html="divText"></div>

and in Controller

$scope.divText = '<H2>some text</H2>';

answered Nov 21 '16 at 13:24

Shridhar Sagari

257
4
6

score 2 · Answer 2 · answered Aug 07 '14 at 08:29

You can do that in different way "more angular then jQuery" using directive "ng-if" please see here http://jsbin.com/tuvom/1/edit

HTML

<body ng-app="app">
  <div ng-controller="firstCtrl">
    <div ng-repeat="item in products">
      <h4>{{item.name}}</h4>
      <button ng-if="!item.showdescription" ng-click="item.showdescription= !item.showdescription">Show description</button>
      <button ng-if="item.showdescription" ng-click="item.showdescription= !item.showdescription">Hide description</button>
      <p ng-if="item.showdescription">{{item.description}}</p>
    </div>
      </div>
</body>

JS

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope){

  $scope.products = [

    {name:"item one", description:"so the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},
    {name:"item two", description:"so the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},

  ];
});

score 1 · Answer 3 · answered Aug 07 '14 at 05:57

1

This link helped me solve the problem angular.element

This did the trick:

angular.element(document.querySelector('#customerProductCatalogText')).html("NewText");

answered Aug 07 '14 at 05:57

RandomUser

1,843
8
33
65

there's nothing wrong with accepting your own answer if it indeed is the solution you were looking for. Though, it seems @shridhar-sagari shows the more angular preferred way – harschware Aug 21 '17 at 22:51

score 0 · Answer 4 · answered Oct 11 '16 at 14:42

0

Try this one

angular.element('#customerProductCatalogText').innerHTML="<span class='red'>Hello <b>Again</b></span>";

answered Oct 11 '16 at 14:42

Matt

33,328
25
83
97

AngularJS adding text inside a

4 Answers4