0

I'm creating controls dynamically like

<div class="ctrlContainer" ng-repeat="c in Data.Controls">
            <div class="divRow" ng-bind- 
html="trustHTML(getTypeBasedHTML(c.HTMLControlType,Data.RootObjectName + '.'+ 
c.ModelName,c.NeedLabel,c.LabelText))"></div>
        </div>

And my code is defined like 

$scope.getTypeBasedHTML = function (type, ModelBinding, NeedLabel, 
LabelText) {
        var returnHtmltxt = ""
        if (type == "text" || type == "number" || type == "email" || type == 
"date" || type == "checkbox" || type == "radio") {
            if (NeedLabel)
                returnHtmltxt += "<div class='divCell label-column'>" + 
LabelText + "</div>"
            returnHtmltxt += "<div class='divCell'><input type='" + type + 
"' ng-model='" + ModelBinding + "' /></div>"
        }
        return returnHtmltxt
    }

The above function is creating the control as expected and rendered into the page with "ng-model" properties, but when i'm changing values of the controls(input textboxes) the models are not updated in the scope. Can someone please look into this??!! Thanks

Note: The model that are bound to the dynamic elements are also dynamically created into the $scope

Capricorn
  • 2,061
  • 5
  • 24
  • 31
pavan kumar
  • 408
  • 5
  • 19
  • 1
    If you want to use directives like `ng-model` on dynamically generated elements, you will need to use the [$compile](https://docs.angularjs.org/api/ng/service/$compile) service in order to evaluate the directive. – Eddi Aug 21 '18 at 12:17
  • 1
    Use [custom components](https://docs.angularjs.org/guide/component) to add dynamic controls to the DOM. AngularJS controllers should only manipulate the Model. DOM manipulation should only be done in directives or components. [Mixing the concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) as done in this example makes the app hard to understand, debug, test, and maintain. – georgeawg Aug 21 '18 at 13:40

0 Answers0