Question

我有一个带有一些表单控件的bootstrap弹出对话框。每个控件使用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">&times;</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

Answer 1

你可以在角度范围内初始化值吗？

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">&times;</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>

this is my fiddle with ng-repeat

Answer 2

Working Plnkr

您可以通过从外部控制器访问scope来执行此操作。

HTML ：只需在id中添加HTML属性即可。 e.g-＆GT; 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';
    });

});

希望能解决你的问题。

Answer 3

您可以使用ui.bootstrap模块执行您尝试为您做的所有艰苦工作

当使用jQuery设置值时，ng-model不工作

3 个答案: