提问人：sdfsf 提问时间：6/10/2017 更新时间：6/10/2017 访问量：129
如何检测表单的变化并设置新状态？
How to detect changes in form and set new state?
问：
我有带有一组元素（输入）的 HTML 表单。
那么，如何检测任何输入的变化并在对象中设置新语句呢？var data
例如：
<input type="text" name="parameter" value="30">
当我在输入中进行 chnage 时，我需要将输出对象获取为：data
var = data = ["paraeter" : 30];
答：
0赞
Maher
6/10/2017
#1
为了观察角度变化的值，您应该使用 和
ng-changeng-model
var app = angular.module("app", []).
controller("ctrl", function($scope) {
$scope.info = {
parameter: 30,
parameters: {
children: 40
}
};
$scope.callBackIfChange = function(){
console.log($scope.info);
}
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form>
<label>empty value</label>
<input type="text" ng-model="info.name" ng-change="callBackIfChange()">
<br>
<br>
<label>has default value</label>
<input type="number" ng-model="info.parameter" ng-change="callBackIfChange()">
<br>
<br>
<label>nested</label>
<input type="number" ng-model="info.parameters.children" ng-change="callBackIfChange()">
</form>
<hr>
<b>output:</b> {{info | json}}
</div>评论
0赞
sdfsf
6/10/2017
谢谢，但是如果上面存在另一个输入作为父级，以及如何将下面的输入值插入到上面的对象？我的意思是嵌套结构：{parameter：{children：40}}
0赞
Veeresh Devireddy
6/10/2017
#2
以下是涵盖您的情况（onload 和输入更改）的 Jquery 代码，而无需对输入标签的 name 属性进行硬编码：
var inputValuesObj = {}; // << Your Object
$(document).ready(function() {
getDefaultInputValues();
});
$(document).on("load keyup", "input", function() {
getDefaultInputValues();
});
function getDefaultInputValues() {
$("input").each(function(index) {
inputValuesObj[$(this).attr("name")] = $(this).val();
});
$("div#res").html(JSON.stringify(inputValuesObj));
}
您的测试在这里 - https://jsfiddle.net/uo08fedh/20/
希望对你有所帮助！
评论