Update JSON data in ng-blur event using AngularJS

Question

Update JSON data in ng-blur event using AngularJS

Could you offer some guidance on how to push the content from a text box into JSON when I click outside of the box? Below is the code for my text box:

<input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" />

And here is the JSON structure I am working with:

$scope.existingTemp = [{"name": "template1"},{"name": "template2"},{"name": "template3"},{"name": "template4"},{"name": "template5"}];

Any suggestions or ideas are greatly appreciated. Thank you in advance.

javascript json angularjs html

Answer 1

Answer №1

If you want to achieve this, you can utilize the ngBlur directive.

Here is an example of how it can be implemented:

<input type="text" ng-model="addTemplate" ng-blur="addValueToJson(addTemplate)"/>

In your controller, you would have the following code:

$scope.addValueToJson = function(value){
   var newObj = {name: value};
   $scope.existingTemp.push(newObj);
};

You can see a working demo in this JSFiddle.

I hope this information proves useful to you.

Answer 2

If you want to achieve this, you can utilize the ngBlur directive.

Here is an example of how it can be implemented:

<input type="text" ng-model="addTemplate" ng-blur="addValueToJson(addTemplate)"/>

In your controller, you would have the following code:

$scope.addValueToJson = function(value){
   var newObj = {name: value};
   $scope.existingTemp.push(newObj);
};

You can see a working demo in this JSFiddle.

I hope this information proves useful to you.

Answer 3

Answer №2

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d9d6dfcdd4d9ca96d2cbf889968b">[email protected]</a>" src="https://code.angularjs.org/1.3.10/angular.js" data-semver="1.3.10"></script>
  <script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.data=[];
      $scope.fill=function(){
        $scope.data.push("name:"+$scope.addTemplate);
        console.log(JSON.parse(JSON.stringify($scope.data)));
      }
    });
  </script>

</head>

<body ng-controller="MainCtrl">
 <input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" ng-blur="fill()"/>
</body>
</html>

Check out this Plunker: http://plnkr.co/edit/rR0Sl0ZE7xTrZmIonVAI?p=preview

Answer 4

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d9d6dfcdd4d9ca96d2cbf889968b">[email protected]</a>" src="https://code.angularjs.org/1.3.10/angular.js" data-semver="1.3.10"></script>
  <script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.data=[];
      $scope.fill=function(){
        $scope.data.push("name:"+$scope.addTemplate);
        console.log(JSON.parse(JSON.stringify($scope.data)));
      }
    });
  </script>

</head>

<body ng-controller="MainCtrl">
 <input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" ng-blur="fill()"/>
</body>
</html>

Check out this Plunker: http://plnkr.co/edit/rR0Sl0ZE7xTrZmIonVAI?p=preview

Update JSON data in ng-blur event using AngularJS

Answer №1

Answer №2

Similar questions

Utilizing Angular 2 for dynamic CSS binding: manipulating style.width and style.height properties

What's the deal with peculiar symbols and PHP's Json_Encode?

Guidelines for implementing a logout feature in Django using templates

Using React - What is the best way to invoke a function from within a different function?

Highlight the phrase "figure x" within the paragraph to emphasize its importance

Why are two vertical scrolls appearing on the screen simultaneously?

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

I'm using Bootstrap (version 5.3) and when I tried to replicate the features from the examples, I noticed that the background isn't being copied over

Discover every user receiving a database object instead of individual records with mLab

Enhance the dimensions of images on Tumblr

Add the information to the current JSON file

Using Selenium in JavaScript to upload an image is a straightforward process

Utilize the pipe function to generate a personalized component

Converting Blob to Base64 using javascript

Browserify Rails encountered an error - ParseError: Error with 'import' and 'export'. These statements can only appear with 'sourceType: module'

Experiencing difficulties with mocha and expect while using Node.js for error handling

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

When using Mongoose paginate, there is always one missing document

AngularJS ng-repeat is not updating when the state changes

Eliminate redundant sets of comma-separated numbers from the jQuery input text value