【发布时间】：2016-04-04 10:08:26
【问题描述】：
我有一个带有一些表单控件的引导弹出对话框。每个控件都使用 ng-model 绑定。对于对话框中的两个文本框，我在对话框打开时使用 jquery 设置值，其余两个是用户可编辑的。用户可对其进行编辑的两个 ng-model 工作正常。但对其他人来说不是。如果我自己更改值，它们将正常工作。但不是在使用 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);
}
});
这是我为这个问题创建的小提琴
【问题讨论】：
-
为什么不直接在 $scope 中分配用户名，电子邮件而不是输入？
-
实际上我有一个用户表，当单击特定用户的按钮时，此对话框打开。这些值对应于所选用户。如果是针对单个用户，我会那样做。
-
创建一个用户数组并使用 ng-repeat 代替？根本没有理由使用 Jquery。在 angular.js 中避免使用 JQuery 是一种好习惯。
标签： javascript jquery angularjs twitter-bootstrap dialog