Ways to extract the text from a modifiable div using angularjs

Question

Ways to extract the text from a modifiable div using angularjs

I am currently facing a challenge in extracting content from an editable div. I am having trouble incorporating the Angular template for this task.

The part that is posing a difficulty for me is figuring out how to link model data from the HTML template to the Angular controller.

<div ng-repeat="todo in todos">                 
    <div class="todo.id" ng-model={{ ? }} contenteditable="true">
        <pre>{{ todo.text }}</pre>                          
    </div>
    <button type="button" class="btn btn-link"
        ng-click="editTodo(todo.id)">Edit</button>
</div>

My goal is to pass whatever text is present inside the

<div class="todo.id"></div>

Due to the fact that my div is within an ng-repeat, I am unable to assign ng-model to a single scope variable.

What should be inserted in place of "ng-model={{ ? }}"? Or is there a workaround for dealing with such a situation?

Your assistance in this matter would be greatly appreciated.

javascript angularjs angular-ngmodel

Answer 1

Answer №1

If you want to enable a div to be editable in an Angular application, you will need to create a custom contenteditable directive.

The Angular documentation provides an example of how to do this:

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#custom-control-example

You can also check out a helpful blog post by Gabo Esquivel on the same topic here:

As illustrated in Gabriel's code snippet, the directive for making a div editable would look like this (comments added for clarity):

app.directive("contenteditable", function() {
  return {
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {

      // Function to sync model with view when typing 
      function read() {
        ngModel.$setViewValue(element.html());
      }

      //$render is invoked when modelvalue differs from viewvalue
      // Check documentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#
      ngModel.$render = function() {
        element.html(ngModel.$viewValue || "");
      };

      // Trigger read function on blur, keyup, and change events
      element.bind("blur keyup change", function() {
        scope.$apply(read);
      });
    }
  };
});

Best of luck!

Answer 2

If you want to enable a div to be editable in an Angular application, you will need to create a custom contenteditable directive.

The Angular documentation provides an example of how to do this:

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#custom-control-example

You can also check out a helpful blog post by Gabo Esquivel on the same topic here:

As illustrated in Gabriel's code snippet, the directive for making a div editable would look like this (comments added for clarity):

app.directive("contenteditable", function() {
  return {
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {

      // Function to sync model with view when typing 
      function read() {
        ngModel.$setViewValue(element.html());
      }

      //$render is invoked when modelvalue differs from viewvalue
      // Check documentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#
      ngModel.$render = function() {
        element.html(ngModel.$viewValue || "");
      };

      // Trigger read function on blur, keyup, and change events
      element.bind("blur keyup change", function() {
        scope.$apply(read);
      });
    }
  };
});

Best of luck!

Ways to extract the text from a modifiable div using angularjs

Answer №1

Similar questions

What steps can be taken to avoid children components from re-rendering every time the parent component's state or props change

What is the best way to navigate through images only when hovering?

When a single object is entered, JSON returns 'undefined', however, it works successfully when using the .map() function

Limit pasted content in an Angular contenteditable div

I am unable to access the properties of an undefined element, specifically the 'size' property in Next.js 13

Typescript Routing Issue - This call does not match any overloads

difficulty encountered when using the Angular delete method in conjunction with Express.js

Using Javascript to efficiently reverse geocode multiple locations with Google Maps

I'm looking to establish an SSL connection using Node.js with HTTPS. How can I accomplish

The challenge with encoding URL in Ajax requests

What is the method for transmitting a YAML file in the form of a base64 encoded string?

Using the OR condition in the ternary operator within ReactJS

Webpack development server is not recognizing changes to the SCSS files

The navigator's userAgent property is used to match specific handset identifications

Utilize AngularJS to Dynamically Render ASP.NET MVC PartialView

Struggling with getting a dropdown to switch the currently displayed image

Troubleshooting issues with jQuery `.live()` event not triggering as expected

How can values be passed to child components in Vue when using component tags for dynamically switching components?

Is it possible to selectively hide the remove icon for certain files within the antd Upload component?

What is the best way to invoke a function in Typescript while retrieving data?