Dynamically generate input fields + ng-change binding with AngularJS

Question

I'm currently facing a multi-faceted 'problem' which can be divided in a few steps.

The user of a framework will be able to add settings dynamic to the UI via an XML-file which will be read when opening the settings page. Example:

<settings>
    <group>
        <groupname>Profile settings</groupname>
        <groupsettings>
            <setting type="range" savename="volumeslider">
                <label>Volume</label>
                <min>0</min>
                <max>10</max>
                <step>1</step>
                <default>5</default>
                <labelleft>Low</labelleft>
                <labelright>High</labelright>
            </setting>
            <setting type="checkbox" savename="brightnesstoggle">
                <label>Brightness</label>
                <default>true</default>
            </setting>
        </groupsettings>
    </group>
</settings>

As you can see a range-slider (input type="range") and a checkbox (input type="checkbox") is defined here.

Currently the XML gets parsed with an ajax call

$.ajax({
            type: "GET",
            url: "settings/globalapp.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('group').each(
                    function(){/* Parse code here */}
    })

This gets parsed to a long string and then the string is appended to the correct place in the UI.

$("ul>.globalList").append(outputString);

outputString = "<input type="range" min="0" max="10" value="5" ng-model="volumeslider" ng-change="settingsInputChanged(volumeslider, 'volumeslider')">"

As you can see I have a ng-change binding, but this doesn't work when the code gets appended with jQuery. When I hardcode this string into my HTML, it works perfectly (with settingsInputChanged being a generic function to add the value of the settings to the localStorage).

Am I tackling the problem completly wrong or has Angular a simple, built-in way to handle this?

score 1 · Accepted Answer · edited May 23 '17 at 10:24

1

Yes, you are handling it wrong way, the HTML get parsed when the angular loads up thats why it works fine when you hardcode it, but not when you add it dynamically. And please check this link to see how to dynamically add HTML into your application

edited May 23 '17 at 10:24

Community

1
1

answered Feb 21 '15 at 10:51

Muhammad Faizan

1,709
1
15
37

I also came across that example when looking for an answer. I'm gonna try it again, more deeply – Matt Feb 21 '15 at 10:57
Using the template method worked, thanks! But I'm having another issue now, getting a unique identifier in the ng-change directive - http://stackoverflow.com/questions/28646571/pass-value-and-unique-identifier-to-function-with-ng-change-with-dynamic-content – Matt Feb 21 '15 at 14:24

score 0 · Answer 2 · answered Feb 21 '15 at 10:53

0

Try using the Angular equivalents to do this. Changing stuff in the DOM is usually done through a directive. So it would probably be a good idea to parse the XML with $http and after that pass the object / string into a directive that renders the html.

https://docs.angularjs.org/guide/directive

answered Feb 21 '15 at 10:53

Daniël Smink

368
1
7

I figured directives might be the answer, but I'm not very experienced with them. Hopefully the docs will help me – Matt Feb 21 '15 at 10:58

Dynamically generate input fields + ng-change binding with AngularJS

2 Answers2