Angular programmatically binding ng-model

Question

I have an inline label which when clicked will be replaced with input box to edit the content.

<div ng-app>
    <div ng-controller="TempController">
        <label ng-model="Data" class="editable-lbl">{{ Data }}</label>
        <br /><br /> 
        <button ng-click="Save()">Save</button>
    </div>
</div>

The problem is after editing, it will not update the variable inside the scope.

function TempController($scope)
{
    $scope.Data = 'Hi! Im enteng, Click me to edit';

    $scope.Save = function()
    {
         alert($scope.Data);
    }
}

$(document).on("click", "label.editable-lbl", function () {
     var txt = $(".editable-lbl").text();
     $(".editable-lbl").replaceWith("<input ng-model='Data' class='editable-lbl-input' />");
     $(".editable-lbl-input").val(txt);
});

$(document).on("blur", "input.editable-lbl-input", function () {
     var txt = $(this).val();
     $(this).replaceWith("<label class='editable-lbl'></label>");
     $(".editable-lbl").text(txt);
});

Check this fiddle for live example Fiddle

I tried to bind ng-model in

$(".editable-lbl").replaceWith("<input ng-model='Data' class='editable-lbl-input' />");

but still when I click the save button, the same value will prompt.

Maxim Shoustin · Accepted Answer · 2014-09-26 08:11:46Z

2

You have at least two problems:

1st off when you try to add any element, in your case for example: <input ng-model='Data' class='editable-lbl-input' /> you need to compile it first by using $compilein order to tell to Angular to put this content under digest cycle.
Any DOM manipulation/update write in Directives only! Otherwise you brake Angular concept

You can find this example helpful: Fiddle

edited Sep 26, 2014 at 8:11

answered Sep 26, 2014 at 8:06

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

2 Comments

Vincent Dagpin Over a year ago

Hi, i tried it and still the data is not updating.. jsfiddle.net/vksh2wfv/5 would you mind to check the sample please

Vincent Dagpin Over a year ago

oopps.. my scope:true must be false.. it is now working.. thanks

Renan Felipe Ferreira · Accepted Answer · 2019-01-17 13:56:48Z

-1

Try to put your event listeners inside the controller and then update $scope.Data instead of using jquery functions.

answered Jan 17, 2019 at 13:56

Renan Felipe Ferreira

244 bronze badges

Collectives™ on Stack Overflow

Angular programmatically binding ng-model

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related