$ scope.myObjectVariable值设置为input属性值
晚上好,
我正在写一个使用AngularJS的应用程序,我需要应用程序通过POST请求向nodejs服务器发送数据。
我的数据结构像一个JSON对象,它具有数据绑定感谢AngularJS框架。
到目前为止,一个函数正在dynamic地尝试创build用户可能喜欢的某些input
标签内的可能值。 一个例子:
<button ng-click="generateFoodAndBeverages(row)>Generate</button> <input type="text" ng-model="row.service.day.beverage" placeholder="beverage" /> <input type="text" ng-model="row.service.day.food" placeholder="food" />
这两个input值可以由用户通过键入他们想要的值来设置( 例如“可乐”,“汉堡” ),但是在input标签上方是可以为用户生成input值的button。
生成这些值的函数从一个数组中获取它们,然后在该函数的结尾返回两个可能的值,一个用于饮料,一个用于食物。
当它有两个返回值时,它改变两个input的属性值,将它们设置为函数产生的两种可能性:
jQuery("#input1").attr("value", generateFoodAndBeverages(row)[0]); jQuery("#input2").attr("value", generateFoodAndBeverages(row)[1]);
这不是完美也不高雅,但它的工作。 每次用户请求自动生成食品和饮料时,该函数都会填充并dynamic更改这两个input元素的值属性,以便实际设置值并确实存在。
即使如此,即使我在屏幕上将它们看作是input字段中的文本,我的POST请求也不能识别ng-model实际改变的事实。 ng-model将更改注册到input字段的value属性的唯一方法是如果用户使用键盘input内容,则手动更改value属性。 另一个例子:
<input type="text" value="generateValue()" ng-model="row.service.info" />
这里的一个不会改变ng模型的值。
<input type="text" value="User Typed Value" ng-model="row.service.info" />
这另外一个改变了ng-model的值,当它改变和存在时,它被传递给$ scope,稍后可以作为POST请求发送到服务器。
关于为什么input字段的“自动和dynamic生成”值为什么没有被ng-model注册,而用户types的值呢?
提前致谢!
[编辑]
显然这个问题伴随着ng-model
不变。 我试图通过在input中应用ng-change
来debugging问题。 如果更改是通过javascript完成的,它没有注册到ng-model
,并且ng-change
函数不会被触发,因为ng-model
没有被改变,即使我可以清楚地看到由javascript设置的新值标签。 如果我手动ng-change
input标签的值,则会触发ng-change
并且控制台logging更改。
如果每行都没有那么不同,我可以直接将这些更改应用到ng-model
。
像这样的ng模型:
<input ng-model="row.serviceInfo.DayObject[dayString].food" /> <input ng-model="row.serviceInfo.DayObject[dayString].beverage" />
给定模型的dynamic性,我将如何能够将这些变化直接应用到ng模型中。 作为一个例子,我可以有1000行,每个都有自己的serviceInfo对象。 我不知道如何使用dynamic生成的值为每个行更改模型。
[编辑]
这个问题确实在ng模型中没有改变。 该解决scheme包括将更改应用于dynamic生成的值函数内的每个元素的ng模型。 感谢大家的意见。 如果有人遇到同样的问题,我会在这里留下这段代码! 再次感谢!
let foodEl = angular.element(the row element food input); let beverageEl = angular.element(the row element beverage input); $scope.displayedCollection[i].serviceInfo = { "day" : { "food" : generatedValuesFood(el, day), "beverage" : generatedValuesBeverage(el, day) } }; foodEl.val($scope.displayedCollection[i].serviceInfo.day.food); beverageEl.val($scope.displayedCollection[i].serviceInfo.day.beverage);
我认为你的问题很简单。 正如@ssougnez所说,不要混合使用jQuery与angularjs。 Angularjs使用数据绑定的概念,不要使用jquery风格来改变input值,而是使用ng-model指令将数据从模型绑定到HTML控件(input,select,textarea)上的视图。 在你的generateFoodAndBeverages函数中,只需根据哪一行设置ng-model值,如:
var generateFoodAndBeverages = function () { $scope.row.service.day.beverage = array[0]; $scope.row.service.day.food = array[1]; };
- 获取TypeError:无法在mysql node.js中调用null的方法'releaseConnection'
- Eclipse中的Node Express Project的JavaScript文件中没有定义'angular'
- expressJS路由器规划 – 如何设置一个有效的路由器
- 这些Node.js和JavaScript框架是什么?它们是做什么的?
- Node.js / Angular.jspipe理员授权的路线
- 错误:ENOENT:没有这样的文件或目录与Angular2和Express.js
- 了解yeoman的fullstack套接字服务
- 自动将index.html的引用复制到karma.conf.js中
- 在Angular和IE8中使用$ http请求拒绝访问