[英]AngularJS: How to get changed key and value from existing object in form?
我有一个包含100个键,值对的对象。
$scope.obj = {
key1: value1,
key1: value1,
.
.
.
key100: value100
}
我有100个输入
<form>
<input value="obj.key1" ng-model="obj.key1" />
<input value="obj.key2" ng-model="obj.key2" />
<input value="obj.key3" ng-model="obj.key3" />
.
.
.
<input value="obj.key100" ng-model="obj.key100" />
<button ng-click="submit> </button>
</form>
当我求和时,数据将发送到服务器。 有时我会更改值,有时不更改。 如果我在一个输入中更改一个值,则需要该key,value
即来自对象的key,value
。 这样我就可以发送带有该数据的服务器调用,而不发送整个数据。
我可以通过使用默认的ngForm
指令(例如$dirty
和原始输入值的“保存状态”对象来实现此目的。 这是实现所需目标的简单解决方案。 ngForm
本身不提供原始值,因此您必须创建“保存对象”并手动比较它们。
<div ng-controller="MyCtrl">
<form name="myForm" ng-submit="submit()">
<input type="text" name="key1" ng-model="obj.key1"><br />
<input type="text" name="key2" ng-model="obj.key2"><br />
<input type="text" name="key3" ng-model="obj.key3">
<input type="submit" id="submit" value="Submit" />
</form>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.obj = {
key1: 'test 1',
key2: 'test 2',
key3: 'test 3',
}
var originalValues = angular.copy($scope.obj);
$scope.submit = function () {
var paramsChanged = {};
angular.forEach($scope.obj, function (value, key) {
if ($scope.myForm[key].$dirty && originalValues[key] !== value) {
paramsChanged[key] = value;
}
});
console.log(paramsChanged);
}
});
> 演示小提琴
拥有变量的副本,并在将其发送到服务器之前,使用如下比较函数将模型对象与复制的变量进行比较:
// At the time of initialization
$scope.obj = [ ... ];
var copiedObj = angular.copy($scope.obj);
// At the time of submit
var changed = {};
Object.keys(copiedObj).forEach(key => {
if(copiedObj[key] !== $scope.obj[key]) {
changed[key] = $scope.obj[key];
}
});
// Submit `changed` to the server
假设copiedObj
是原来的副本$scope.obj
, changed
将包含实际改变的关键。 这样就可以将changed
发送到服务器。
您可以使用$ watch监视$scope
特定更改。
$scope.$watch('obj.key1', function(newValue, oldValue) {
console.log('Key1 was updated from' + oldValue + ' to ' + newValue');
});
您可以通过这种方式将ng-change绑定到HTML,并且每当特定元素发生ng-change时,就编写代码以将其推入数组并将该数组发送到服务器。 样例代码
<input value="obj.key100" ng-model="obj.key100" ng-change="selectedValue(obj.keyx)" />
角度代码
$scope.tempValues=[];
$scope.selectedValue = function(x) {
$scope.tempValues.push(x);
}
您可以使用ng-change
来检测任何更改,也可以使用ng-change
ng-repeat
的(键,值)语法列出您的输入。 这是一个演示:
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.obj = { "key1": "value1", "key2": "value2", "key3": "value3" } var toSend = []; $scope.select = function(key) { var s = {}; s[key] = $scope.obj[key] toSend.push(s); // or just the value: $scope.obj[key] } $scope.submit = function() { console.log(toSend) $scope.sent = toSend; } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <form ng-submit="submit()"> <div ng-repeat="(key,value) in obj"> <input ng-change="select(key)" ng-model="value" /><br> </div> <button type="submit">Send</button> </form> <pre>{{sent | json}}</pre> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.