Dynamically adding tags in AngularJS

Question

all:

Is there a way to dynamically add a tag (especially a custom tag) in AngularJS?

I have a custom tag recently created of the type:

<mytag type="small" />

which I am attempting to manage in a larger <div> element. What I would like to do is place, within the div element, a button that, when pressed, causes the creation of a new mytag element within the div.

In other words, given an initial page composition:

<div ng-controller="tagControl">
   <div id="tagdiv">
      <mytag type="small" />
   </div>
   <div id="Controls">
      <button ng-click="addTag()">Add New Tag</button>
      <button ng-click="clearTags()">Clear All Tags</button>
   </div>
</div>

I would like to put something in the tagControl's addTag() function that adds a new mytag tag whenever the "Add New Tag" button is pressed, and I'd like to put something in the clearTags() function that removes all added tags when the "Clear All Tags" button is pressed.

Is this possible using AngularJS? If not, can it be accomplished using a third- party library? In either event, how can this be done?

Thanks in advance for any insights...

dnc253 · Accepted Answer · 2012-10-25 16:58:18Z

3

You need to think in terms of MVC and not DOM manipulation. How many of your <mytag>s you want to show up should be driven by something in your model. And then your HTML would look like this:

<div ng-controller="tagControl">
  <div id="tagdiv">
     <mytag type="small" ng-repeat="foo in items" />
  </div>
  <div id="Controls">
     <button ng-click="addTag()">Add New Tag</button>
     <button ng-click="clearTags()">Clear All Tags</button>
  </div>
</div>

Then your addTag() method would just add to the items model and the clearTags() would clear the list. Angular will add the tags for you as you update the model

answered Oct 25, 2012 at 16:58

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

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

Collectives™ on Stack Overflow

Dynamically adding tags in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related