Get the edited value in AngularJS

Question

I have data in JSON format, like this:

"details": {
    "col1": "value1",
    "col2": "value2",
    "col3": "value3",
    "col4": "value4",
    "col5": "value5",
    "col6": "value6",
    "col7": "value7",
    "col8": "value8"
    }

<div ng-repeat="(key,value) in details">
<div>{{key}}:</div>
<input value="value">{{value}} </input>

If I edit the value filed, how can get edited value in controller?

Sajeetharan · Accepted Answer · 2016-09-16T06:20:08.410

0

Use the $scope variable and bind to ng-model

<input type="text" ng-model="value" ng-blur="print(value)" size="30">

WORKING DEMO

edited Sep 16 '16 at 06:20

answered Sep 16 '16 at 06:12

Sajeetharan

216,225
63
350
396

it is working fine, but i want to update the json as well – user123 Sep 16 '16 at 08:31

score 0 · Answer 2 · answered Sep 16 '16 at 07:20

var app = angular.module('myApp', []);

app.controller('appCtrl', function($scope) {
  var details = {
    "col1": "value1",
    "col2": "value2",
    "col3": "value3",
    "col4": "value4",
    "col5": "value5",
    "col6": "value6",
    "col7": "value7",
    "col8": "value8"
  }


  $scope.details = details;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="appCtrl">
    <div ng-repeat="(key,value) in details">
      <label>{{key}}:</label>
      <input ng-model="details[key]">
    </div>
    <br>
    <br>
    <div>{{details}}</div>
</body>

score 0 · Answer 3 · answered Sep 16 '16 at 07:49

Is this what you're looking for ?

Try this working snippet. It will give the value depends on the changed in the text-box.

var app = angular.module('myApp', []);

app.controller('appCtrl', function($scope) {
  var details = {
    "col1": "value1",
    "col2": "value2",
    "col3": "value3",
    "col4": "value4",
    "col5": "value5",
    "col6": "value6",
    "col7": "value7",
    "col8": "value8"
  }


  $scope.details = details;
  
  $scope.getChangedValue = function(value){
    console.log("Key :" + value);
    console.log("Value :" + details[value]);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="appCtrl">
    <div ng-repeat="(key,value) in details">
      <label>{{key}}:</label>
      <input ng-model="details[key]" ng-blur="getChangedValue(key)">
    </div>
    <br>
    <br>
    <div>{{details}}</div>
  </div>
</body>

@Mahesh Karthu : Thanks for the snippet.

Get the edited value in AngularJS

3 Answers3