how dynamically create div without ng-repeat,angularjs?

Question

I need to generate 'div' dynamically without the help of ng-repeat and also different data in the scope.

<div attribute={{atrb}}>{{name}}</div> (<- dynamic div).

Controller

$scope.GenerateDiv = function()
{
$scope.name = "praveen";
$scope.atrb = "01";
}

What is the reason you don't want to use `ng-repeat` when it's clearly the best and simplest solution ? — Erazihel, Feb 29 '16 at 12:38
you can create a directive, where you can pass data, and a template. In the template you can put the html — adib.mosharrof, Feb 29 '16 at 12:49

score 3 · Answer 1 · edited May 23 '17 at 11:45

3

You can use ng-if, or $compile

edited May 23 '17 at 11:45

Community

1
1

answered Feb 29 '16 at 12:45

terafor

1,620
21
28

score 2 · Answer 2 · answered Feb 29 '16 at 12:50

You can do it like

$scope.str = ''
for ( i = 0 ; i < arrayofdata ; i++ ){
  $scope.str += "<div>"+arrayofdata[0].ex+"</div>"
}


use Sanitize filter the following link contains log
https://docs.angularjs.org/api/ngSanitize

then create html like this
<div>
{{str | Sanitize}}
</div>

Duncan · Answer 3 · 2016-02-29T13:35:01.597

1

If it is a single div you use ng-if to control the creation of it:

<div attribute="{{atrb}}" ng-if="name">{{name}}</div>

When the condition is not met the div is not created. When the condition becomes true, the div will be added to your DOM.

If you need several of them then store the parameters in an array and use ng-repeat.

edited Feb 29 '16 at 13:35

answered Feb 29 '16 at 13:16

Duncan

92,073
11
122
156

it is not single,i need to generate multiple div – Pravee Feb 29 '16 at 13:26
that's what `ng-repeat` is for. – Duncan Feb 29 '16 at 13:35

how dynamically create div without ng-repeat,angularjs?

3 Answers3