在 AngularJS 中获取编辑后的值答案

【问题标题】：Get the edited value in AngularJS在 AngularJS 中获取编辑后的值
【发布时间】：2016-09-16 06:11:19
【问题描述】：

我有 JSON 格式的数据，像这样：

"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>

如果我编辑值字段，如何在控制器中获取编辑值？

【问题讨论】：

标签： angularjs json blur angular-ngmodel angularjs-ng-change

【解决方案1】：

使用 $scope 变量并绑定到 ng-model

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

WORKING DEMO

【讨论】：

它工作正常，但我也想更新 json

【解决方案2】：

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>

【讨论】：

【解决方案3】：

这就是你要找的吗？

试试这个有效的 sn-p。它会根据文本框中的变化给出值。

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：感谢您的 sn-p。

【讨论】：