ng-change inside dynamically generated html/ionic checkbox not binding

Question

My team and I have been in the process of processing an XML file and composing a settings page based on said XML. The elements here are dynamically generated. Please find below an example of how the elements are generated.

 settings.getToggle = function(label, def){var str1 = '<li class="item lighten orange">';
var str2 = label;  //get label from xml
return str1 + str2 + '<label class="switch orange">' +
                     '<input type="checkbox" ng-model="testmodel" class="switch-input" >' +
                     '<span class="switch-label" data-on="Aan" data-off="Uit"></span>' +
                     '<span class="switch-handle"  ></span></label></li>';};

This little piece of code makes sure that when the XML file says: "you have to display a togglebutton", a togglebutton is added to settings page and displayed accordingly. There can be multiple buttons of the same kind. In the controller we call this code: (settings.getToggle(...);

  $(this).find("setting[type='toggle']").each(function () {
                      var label = $(this).find("label").text();
                       var def = $(this).find("default");
                       $("div>.list").append(settings.getToggle(label, def));
                   });

Up to here not a problem. The html is generated flawlessly.

At this point we must be able to attach a handler to said elements. And that's where the trouble starts.

Upon adding an ng-change to this html5 checkbox with ionic layout, or even ng-click, ng-model,... you name it, the code does not seem to respond at all.

Example (rest of html -> first code fragment):

'<input type="checkbox" ng-click()="testmodel" class="switch-input" >'

Coupled with an angular code (in a working, tested controller)

    .controller('SettingsController', function ($scope)
{
    $scope.testmodel = function(){
        alert("click");
    };

The alert in this case does not pop up. Does anyone know how to fix this? This is my main and most important question.

By extension, with me being relatively new to angular I have trouble imagining how to advance from there. I had thought about adding a change listener to each element, and then, getting the name of the element somehow(model?) and putting them in a json var and into localstorage. Does anyone have a more specific idea. I'm actually not sure what to do at this point.

Finally, I'd like to apologize in advance for mistakes in posting and angular. I am in both (stackoverflow and angular) a mere beginner.

Jai · Accepted Answer · 2015-02-12 11:08:18Z

1

change to this without () on ng-click and append it to the function name testmodel():

'<input type="checkbox" ng-click="testmodel()" class="switch-input" >'

See the plnkr.

if you are going to use ng-change directive then in conjunction with this you need to have ng-model too:

<input type="checkbox" ng-model='this.checked' ng-change="testmodel()" class="switch-input" >

and in the method in the controller:

$scope.testmodel = function() {
   alert(this.checked);
};

ng-change with ng-model example plnkr.

edited Feb 12, 2015 at 11:08

answered Feb 12, 2015 at 10:54

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

1 Comment

user3603952 Over a year ago

Hey, thanks but it still won't work (still not getting into the scope code). It looks like it might be having something to do with my adding it to the page dynamically since, if I add $watch to the scope it registers a change, or a click on loading the page (times 3, I have no clue why).

Collectives™ on Stack Overflow

ng-change inside dynamically generated html/ionic checkbox not binding

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related