在使用jquery更改输入的值失败后更新输入的ng-model
在使用jquery更改输入的值失败后更新输入的ng-model
提问于 2016-11-24 01:00:08
情况
这只是我在一个实际项目中尝试完成的一个示例，在这个项目中，我从web服务获得一个名称数组，然后使用这些名称定位输入，选择它们，然后使用jQuery设置它们的值。
问题
我需要知道如何更新这些字段的ng-model，我使用jQuery更改了这些字段的值属性
我已经试过了
- Update Angular model after setting input value with jQuery
- Angular model doesn't update when changing input programmatically
- Update HTML input value changes in angular ng-model
...but，这些选项我都没有用过。
我使用的是AngularJS v1.4.8和jQuery v1.11.1
我曾尝试将输入类型设置为hidden，并使用style: display:none设置类型为text，但我无法正常工作。
这是我正在尝试做的一个演示。这具有与输入和与相同ng-model的跨度绑定。
当您单击该按钮时，它应该使用jQuery更改输入值，然后更新ng-model。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body data-ng-app="app">
<div data-ng-controller="myCtrl as ctrl">
<span>Value: {{ctrl.myValue}}</span>
<input name="myId" type="hidden" data-ng-model="ctrl.myValue" />
<button data-ng-click="ctrl.changeValue('ValueChanged')">Change Value</button>
</div>
<script>
//my controller
angular.module('app', [])
.controller('myCtrl', function(){
var vm = this;
vm.wizard = {
changeValue: fnChangeValue
}
return vm.wizard;
function fnChangeValue(newValue){
var e = $('#myId');
e.val(newValue);
e.trigger('input'); //first option
//e.triggerHandler('change'); //second option
}
});
</script>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-24 01:37:35
修正了ID，增加了jQuery的change()，这可能就是你想要做的。下面你可以找到你的代码修复。下面是通常单独使用AngularJS完成此操作的方式：https://jsfiddle.net/rwtm1uh9/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="myCtrl as ctrl">
<span>Value: {{ctrl.myValue}}</span>
<input id="myId" data-ng-model="ctrl.myValue" />
<button data-ng-click="ctrl.changeValue('ValueChanged')">Change Value</button>
</div>
<script>
//my controller
angular.module('app', [])
.controller('myCtrl', function() {
var vm = this;
vm.wizard = {
changeValue: fnChangeValue
}
return vm.wizard;
function fnChangeValue(newValue) {
var e = $('#myId');
e.val(newValue);
e.change();
}
});
</script>
</div>
Stack Overflow用户
发布于 2016-11-24 01:09:57
您可以编写var e = $('#myId');，在您的输入中有
<input name="myId" type="hidden" data-ng-model="ctrl.myValue2" />我认为您遗漏了id属性，请尝试以下内容：
<input id="myId" type="hidden" data-ng-model="ctrl.myValue2" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40770281
复制相关文章
相似问题