AngularJS - how to add dynamic ng-model

Question

I'm working with a form and would like to add ng-model on dynamic input elements. I have a scope variable defined as:

$scope.formData = {};

On the page there are a couple of drop-down lists that users can choose an option from and based on those options we are appending some input fields to form body.

formBody.append('<input ng-model="formData.'+obj.Title+'" type="number"></input></br>');

This is not working for me because I'm assuming once the controller runs it can't register any new ng-model. Is there way to add dynamic ng-model or there is a different approach to what I'm trying to do (i.e. build predefined views that can be loaded on the page)?

EDIT: I have created a jsfiddle that outlines what I'm trying to do - http://jsfiddle.net/k5u64yk1/

Not exactly this but take a look at how I got Angular to recompile elements with directives earlier - just swap out where I change the ng-options attribute to ng-model and it should work. stackoverflow.com/questions/32334054/… — IfTrue
– IfTrue, Commented Sep 1, 2015 at 20:55
Thanks for your comment! We were able to do this with $compile. And I think it will work out well. I'll give your way a try if all goes south. — habibg
– habibg, Commented Sep 2, 2015 at 18:38

David L · Accepted Answer · 2015-09-02 16:06:00Z

5

If you need to dynamically add html with dynamic bindings that cannot be encapsulated into ng-repeat, ng-if, etc, you have to call $compile on the template once it has been modified to alert AngularJS that it has to reparse the template and initiate a new digest cycle. This will pick up any new ng-model bindings and appropriately tie them to your scope.

HTML:

<div ng-app="MyApp" ng-controller="MyCntrl">
    <button ng-click="addInput()">Add Input</button>
    <div id="form">
        input would go here.
    </div>
</div>

JS: By placing your add input inside of a click event, you avoid an infinite compile loop. Note that this currently resets the state of your form, so if you wanted to work around that you'd need to capture your form state and restore it after compile.

$scope.addInput = function () {
    var aForm = (angular.element(document.getElementById('form')));

    if ($scope.data["Digital Conversation"][0].MetricType.Title === "Number") {
        aForm.append(
            '<input ng-model="formData.' + 
            $scope.data["Digital Conversation"][0].Title.Title + 
            '" type="number"></input>');
    }

    $compile(aForm)($scope);
}

You can find the working jsfiddle here: http://jsfiddle.net/k5u64yk1/

edited Sep 2, 2015 at 16:06

answered Sep 1, 2015 at 20:54

David L

34.1k8 gold badges70 silver badges98 bronze badges

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

2 Comments

David L Over a year ago

@habibg I've updated my answer and attached working fiddle for you.

habibg Over a year ago

David the link shows the same thing I provided in the above comment but what you suggested works! I added your method on my original jsfiddle and updated it - jsfiddle.net/k5u64yk1/1

Collectives™ on Stack Overflow

AngularJS - how to add dynamic ng-model

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related