Question

我有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>

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

Answer 1

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

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

WORKING DEMO

Answer 2

＆＃13;

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;
});

＆＃13;

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

＆＃13;

Answer 3

这是你正在寻找的吗？

试试这个工作片段。它将赋予值取决于文本框中的更改。

＆＃13;

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]);
  };
});

＆＃13;

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

＆＃13;

@Mahesh Karthu：谢谢你的片段。

获取AngularJS中的编辑值

3 个答案: