当使用jQuery设置值时，ng模型不起作用
ng-model not working when value set using jQuery
我有一个带有一些表单控件的引导弹出对话框。每个控件使用ng模型进行绑定。对于对话框中的两个文本框，当对话框打开时，我使用jquery设置值，其余两个都是用户可编辑的。两个用户可编辑的ng模型运行良好。但对其他人来说，情况并非如此。如果我自己改变价值，它们就会正常工作。但当使用jQuery设置值时则不会。我必须使用jquery设置值。过去几天的挣扎。任何帮助都将不胜感激。这是我的代码
<body ng-app="my-app" ng-controller="Ctrl">
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
<a href="#contactUser" role="button" class="btn" data-toggle="modal">Launch Modal</a>
</div>
<!-- Modal -->
<div id="contactUser" class="modal fade openDilog" role="dialog">
<div id="emailform" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-envelope"></span>Contact User</h4>
</div>
<div class="modal-body ">
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Email:</label>
<div class="col-sm-10">
<input type="email" ng-model="email" class="form-control" id="email" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="username">UserName:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="username" id="username" name="username" placeholder="Enter UserName" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control" required ng-model="subject" id="subject" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="message">Message:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" required ng-model="message" id="message" placeholder="Message Goes Here"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" ng-click="Contact()" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Javascript
$('.openDilog').on('show.bs.modal', function (e) {
$(e.currentTarget).find('input[type="email"]').val('email@gmail.com');
$(e.currentTarget).find('input[name="username"]').val('username');
});
var app = angular.module('my-app', []);
app.controller('Ctrl', function($scope){
$scope.Contact = function() {
console.log($scope.email);
console.log($scope.subject);
console.log($scope.message);
console.log($scope.username);
}
});
这是我为问题制作的小提琴
Fiddle
工作程序
您可以通过从控制器外部访问scope来完成此操作。
HTML:只需在HTML中添加一个id属性。例如->id='outer'
<body ng-app="my-app" ng-controller="Ctrl" id='outer'>
JavaScript:
$('.openDilog').on('show.bs.modal', function (e) {
var scope = angular.element($("#outer")).scope();
scope.$apply(function(){
scope.email = 'email@gmail.com';
scope.username = 'username';
});
});
希望能解决你的问题。
您能初始化角度范围内的值吗？
var app = angular.module('my-app', []);
app.controller('Ctrl', function($scope){
$scope.listUser = [
{email: "test1@test.com", username:"test1"},
{email: "test2@test.com", username:"test2"},
{email: "test3@test.com", username:"test3"},
{email: "test4@test.com", username:"test4"}
];
$scope.Contact = function() {
console.log($scope.email);
console.log($scope.subject);
console.log($scope.message);
console.log($scope.username);
}
$scope.openPopin = function(username, email) {
$scope.email = email;
$scope.username = username;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.1/angular.min.js"></script>
<script>
</script>
<body ng-app="my-app" ng-controller="Ctrl">
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
<a href="#contactUser" ng-repeat="user in listUser" role="button" class="btn" data-toggle="modal" ng-click="openPopin(user.username, user.email)">Launch Modal</a>
</div>
<!-- Modal -->
<div id="contactUser" class="modal fade openDilog" role="dialog">
<div id="emailform" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-envelope"></span>Contact User</h4>
</div>
<div class="modal-body ">
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Email:</label>
<div class="col-sm-10">
<input type="email" ng-model="email" class="form-control" id="email" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="username">UserName:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="username" id="username" name="username" placeholder="Enter UserName" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control" required ng-model="subject" id="subject" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="message">Message:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" required ng-model="message" id="message" placeholder="Message Goes Here"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" ng-click="Contact()" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>这是我的小提琴ng重复
您可以使用ui.bootstrap模块来完成您试图为做的所有艰苦工作
相关文章：
- 角度无线电按钮ng模型不起作用
- ng模型内的ng重复的ng重复开始
- 将输入值设置为ng模型属性[Angular]时出现问题
- 自定义指令中的AngularJS ng模型
- 如何为动态创建的文本区域中输入的值更新ng模型
- ng重复中的ng模型-初始化唯一作用域属性
- ng重复变量到ng模型
- 初始化ng模型时，Angular ui选择占位符不起作用
- 角度去抖动(ng模型选项）不起作用
- 即使 ng 模型有值，也使输入字段为空
- 选择框中带有关联的ng模型，选项中带有ng重复
- 为什么我的指令(使用链接）没有出现，并允许ng模型看到它
- AngularJS+IE 11+聚合物=ng模型未更新
- ng模型在$(element）.clone(）之后不起作用
- 为什么ng选项指令需要ng模型
- 使用引导时间选取器时，没有更新数据ng模型值
- 具有ng重复的动态ng模型
- 有没有一种方法可以在设计模式下将ng模型或工厂绑定到iframe
- 删除ng模型中的ng模型输入值
- Angular.js默认选中不'不适用于ng模型
