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 - /

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/k5u64yk1/

• javascript
• jquery
• angularjs

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

1 Answer 1

If you need to dynamically add html with dynamic bindings that cannot be encapsulated into ng-repeat, ng-if, etc, you have to call $pile 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 pile 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 pile.

$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>');
    }

    $pile(aForm)($scope);
}

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