Angular JS - showcasing and modifying model within textarea while also ensuring updates occur when model is altered

I recently visited this helpful post:

Angular JS display and edit model in textarea

While the information was useful for my current project, I now need to enhance it by making the textarea update when model values change. I am currently working with the latest example provided by @JustMaier in the aforementioned post. I believe I may need to incorporate a $watch, but I am unsure of the specific steps or locations to do so. Any assistance on this matter would be greatly appreciated - thank you!

javascriptangularjstextareaangular-ngmodel

Answer №1

To keep an eye on the value of your model within the directive, you can monitor it and activate the formatters when there is a change:

scope.$watch(function() {
    return ngModel.$modelValue;
}, function(modelValue) {
    // execute the formatters
    ngModel.$modelValue = '';
}, true);

Check out the DEMO here.

Answer №2

Absolutely correct observation. It is indeed noted that ngModel does not monitor deep changes and therefore does not update the view when there are deep model changes:

To address this, you must include the ngModel value in the directive scope to enable the use of $watch on it:

scope:{'ngModel':'='}

Subsequently, you can add a watch function in the directive's link function to update the view value:

scope.$watch ('ngModel', function (newval) { 
  ngModel.$viewValue = toJson(newval);
  ngModel.$render();
}, true);

For a demonstration, refer to: http://codepen.io/anon/pen/xbWamy

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the range directly in ng-repeat from the directive

I am working with HTML code that looks like this: <div dir-paginate="x in comments | itemsPerPage: commentsPerPage"> HERE IS DIRECTIVE FROM BLEOW </div> My goal is to update the commentsPerPage scope within the directive... Below is a direct ...

javascriptangularjs

Accessing data returned from JSON in JQuery beyond the code block required

Is there a way to access returned JSON data outside of the JQuery getJSON method? For example: var price = ""; $.getJSON("../JSONDeliveryPrice", null, function (data) { price = eval(data.price); }); console.log(price); Unfortunately, this code does not ...

javascriptjqueryjsongetjson

React - 'classProperties' is not currently activated in this setting

Recently, I incorporated Truncate-react into my project. Subsequently, React prompted me to install @babel/plugin-proposal-class-properties, which I promptly added to the package.json file as follows: "babel": { "presets": ...

javascriptreactjsbabeljs

Notify user with a Javascript alert if there are no search results found

I have developed a search index for Chicago employees and want to create an alert if no matching records are found. However, I am struggling to determine the value that needs to be inserted in case of an empty result set. Ideally, upon submission of the fu ...

javascriptjqueryhtmlfunctionalert

How can I reduce the number of pagination links in React js?

I need assistance in limiting the amount of pagination displayed on my website. Currently, I am fetching page numbers from the backend using Axios and useEffect, and then displaying them in JSX. However, I am struggling to limit the displayed numbers. Can ...

javascriptreactjspaginationreact-routerreact-hooks

"Retrieve objects from an array based on specified minimum and maximum values, while also checking for any null

My current dataset is structured as follows: const data = [ { id: '11se23-213', name: 'Data1', points: [ { x: 5, y: 1.1 }, { x: 6, y: 2.1 }, { x: 7, y: 3.1 }, { x: 8, y: 1.5 }, { x: 9, y: 2.9 ...

javascriptarraysangulartypescript

Having trouble with calling an AngularJS API URL?

app.controller('Ctrl', function ($scope, $http) { $http({method: 'GET', url: "/api/v1/coupons-dunia/coupons-by-website?websiteId=1"}).success(function(data) { $scope.onlinedata = data.coupons; $scope.websi ...

angularjsangularjs-scopeangularjs-routing

The function tokenNotExpired encounters an error when attempting to access the localStorage, as it

I am looking to incorporate the angular2-jwt library into my project: https://github.com/auth0/angular2-jwt However, I encountered an exception when attempting to call the tokenNotExpired function: Exception: Call to Node module failed with error: Refe ...

javascriptangularlocal-storageangular-universalangular2-jwt

Angular ngx-translate not displaying image

My Angular application is utilizing ngx-translate to support multiple languages. I am trying to dynamically change an image based on the language selected by the user. However, I am facing difficulty in updating the image when a language is clicked. The ap ...

javascriptangulartypescript

Whenever the refresh parameter is activated on the initial jsp page, it triggers a refresh for all jsp pages

Currently, I am facing an issue where I am trying to refresh just the starting page named "1.jsp". The goal is to call some functions on this page and then redirect to another jsp page, "2.jsp", once a certain condition is met. However, I have noticed that ...

javajavascriptjqueryjsp

Ways to protect against form hacking on the client-side

As I contemplate the benefits and drawbacks of utilizing frameworks like VueJS, a question arises that transcends my current coding concerns. Specifically, should form validation be executed on the client side or through server-side processing by a control ...

javascriptvue.jssecurityclient-side

Incorporating a JavaScript script into my Angular 7 project

My project requires me to incorporate the "Loadingbar.js" library into one of my pages. You can find this library here: . Initially, I inserted the CSS code into my global "style.css" file. I started by placing the script in my index.html file: <script ...

javascriptangularinstallationshared-librariesangular7

execute ajax within a standalone javascript function

I am just starting to learn about jquery and ajax, and I have a specific requirement to call ajax from a separate javascript function. The issue is that the JSP file is dynamically generated and the button IDs in the JSP file are also created using a for l ...

javascriptjqueryajax

Why are JS & jQuery's inArray() and indexOf() functions not functioning correctly when indexes are strings?

Here is an example of an array: var arr = []; arr['A string'] = '123'; arr['Another string'] = '456'; I am attempting to find the index of either '123' or '456'. Both methods below are returnin ...

javascriptjqueryarraysindexof

Leveraging Javascript to retrieve input values

Here is my HTML code snippet: <li id='category-10'> <label class="selectit"> <input value="10" type="checkbox" name="post_category[]" id="in-category-10" /> Developmental </label> </li> Below is my JavaScript funct ...

javascriptjqueryinput

Retrieving checkbox data and transmitting it without using a form submission

I've been attempting to extract values from a checkbox group, but for some reason, it's not working as expected. Here is the approach I'm taking: Using a loop to generate checkboxes <input class="group1" type="checkbox" name="catCheck" ...

javascriptjquery

I encountered an error while trying to add a document to Firestore using the 'add' method in Vue.js. Can someone provide guidance on how to

Whenever the function is triggered (on click), I aim to include a new document. Although it functions with .set(), my goal is for a new document to be created each time the form is submitted. The current error code I am encountering is: https://i.sstatic ...

javascriptfirebasevue.jsgoogle-cloud-firestore

The problem with generating an Ajax Iframe for a Spotify widget: x-frame error issue

Currently, I am attempting to dynamically populate a Spotify trackset widget using AJAX after making a GET request to an API endpoint that provides Spotify track URIs. The URL generated functions properly when opened in a browser, and the iframe loads cor ...

javascriptjqueryajaxiframespotify

After a refresh, jQuery's mousenter event is not functioning

I am currently working on a fun project called Etch-a-Sketch for The Odin Project, and I have a jquery grid that can be redrawn with the click of a button. Initially, the grid allows the user to choose the size and then draw on it using .mouseenter. Howev ...

javascriptjqueryhtmlcss

Is there a simpler method to examine scope in Angular when debugging?

During my Angular sessions, I often catch myself repeatedly performing the following steps: Choosing an HTML element in the "elements" tab of dev tools Executing scope = angular.element($0).scope() Is there a simpler way to accomplish this task? Maybe a ...

angularjs