How to add dynamic text fields with AngularJS

Question

My question is more about what would be the best practice in this scenario:

I have a form that has to allow a user to input n number of ideas, each idea in an independent text field. Ideally there would be a couple of buttons next to the last text input to allow the user to create a new text input or to erase the latest one.

I know DOM manipulation is not the way to go with Angular but due to requirements, I have to do something that requires creating elements dynamically. Is there a best practice, service or directive in Angular that could allow me to do this or I should just inject the elements with jQuery?

possible duplicate of Binding ng-model inside ng-repeat loop in AngularJS — j.wittwer
– j.wittwer, Commented May 21, 2014 at 15:23

user2847643 · Accepted Answer · 2014-05-21 15:49:17Z

3

The only thing you need is proper use of ng-repeat. No DOM manipulation with jQuery is necessary. Nor would it be good practice. Behold, the power of ng-repeat.

Working plunker here.

answered May 21, 2014 at 15:49

user2847643

2,93517 silver badges23 bronze badges

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

Comments

Tong Shen · Accepted Answer · 2014-05-21 15:51:27Z

3

Something like this?

<div ng-repeat="idea in ideas">
    <input ng-model="idea">
</div>
<button ng-click="AddNew()">Add New Idea</button>
<button ng-click="DeleteLast()">Delete Last Idea</button>

In controller:

$scope.AddNew = function() {
    $scope.ideas.push("");
}

$scope.DeleteLast= function() {
    $scope.ideas.splice($scope.ideas.length-1, 1);
}

answered May 21, 2014 at 15:51

Tong Shen

1,3669 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to add dynamic text fields with AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related