Angularjs - Dynamically change dom with directives or widgets?

Viewed 22268

my goal is to understand how to use angularJS correctly. I want to be able to tie a selection of variable to dynamically changing the DOM structure using angularJS. I dont think I'm quite understanding the documentation that angular provides and I haven't found any examples here or otherwise. Any help is appreciated.

The idea is that I have this use case where I first start with the selection of the type and from that type selected, the appropriate input type elements will be created and then recorded later with the ng-model (from textareas to checkboxes for example), all the while controlled by the angularjs controller for validation/restrictions. I'm used to the idea of having clone-able elements on the page and destroying and creating new with jQuery, but I've been reading that controllers should not have this logic and should instead be created with directives/widgets. I dont see any examples of directives or widgets being manipulated in this way however so I'm not even sure how to proceed. Can I use directives to manipulate the DOM in this way, not just once but multiple times based on a watched element?

Example of what I would like to do.

$scope.types = ['Type1','Type2']

// something along the lines of...
$scope.layouts = {'Type1':['textarea','textarea'], 'Type2':['numeric','datepicker']}

Select Type 1:

  • Show 2 text areas

Select Type 2:

  • Show a numeric input
  • Show a date picker
2 Answers
Related