How to add content dynamically using angularjs

Question

I have two columns on my page.

Left column has list of add button and right column is empty.

I want add append content to right side based on button click(left side buttons).

These content must be rendered using Angular (using angular binding) before appending to the DOM.

I search a lot but did't got satisfying info.

I am new to AngularJS.

Example:

content is

 <tr>
    <td> <input type="checkbox" name="name1" value={{name}}> </td>
    <td> {{ text }} </td>
</tr>

I want add above tr in right side column (which have empty table initially).

these content must be rendered using Angular (using angular binding) before appending to dom. What do you mean here ? The content is html ? — maxisam
– maxisam, Commented Nov 5, 2012 at 21:46
@maxisam. Sorry for confusion. content is angular template (html). — Anoop
– Anoop, Commented Nov 5, 2012 at 21:54
go to jsfiddle.net/IgorMinar/ADukg fork it and add what you have tried so far. It's easier for people to help if they have a concrete starting point — Liviu T.
– Liviu T., Commented Nov 5, 2012 at 22:07

maxisam · Accepted Answer · 2012-11-05 22:19:52Z

1

I would suggest you use ng-view and route to achieve this.

Here is the plunker

var app = angular.module('plunker', [])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/btnA', { templateUrl: 'btnA.html', controller: btnACtrl })

                            .otherwise({ redirectTo: '/btnB' });
          }]);

function btnACtrl($scope){
   $scope.text = 'Hello world !' ;
}

answered Nov 5, 2012 at 22:19

maxisam

22.9k9 gold badges83 silver badges87 bronze badges

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

1 Comment

Isaac Zepeda Over a year ago

Also you can use ng-include directive docs.angularjs.org/api/ng.directive:ngInclude

Collectives™ on Stack Overflow

How to add content dynamically using angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related