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

Repeatedly view the identical file on HTML

How can I display components using Angular CLI 5 without any visual output?

The menu is loaded dynamically by Ajax from JavaScript once the page is refreshed

Is NextJS 13 the Key to App Directory On-Demand Revalidation?

What could be causing my Link to malfunction in my about.js file?

Strategies for aligning tooltips with the locations of dragged elements

Click on the text within a paragraph element

Utilizing express.js alongside the native MongoDB driver: A comprehensive guide

The canvas's document.getElementById function is unable to find any matching element,

What is the best way to assign dynamic values for array destruction?

styles.css is generating an ERROR message, indicating that it is unable to read properties of null when trying to access the 'classList'

Similar to LINQ's Enumerable.First(predicate) method but with a slightly different syntax, this

Activate a function when the v-data-table in Vuetify is expanded and then collapsed

Unleashing the potential of Chrome's desktop notifications

Monitoring a specific property within an array of objects with AngularJS

Employ the JSON body within the SOAP envelope when transmitting data to a WCF service

Using an array as an argument for .map() results in an error

The left margin is malfunctioning

Three.js - Controlling Visibility of Text in troika-three-text with Clipping Planes

What is the best way to send a REST API request with escaped double quotes?