ng-Modell funktioniert nicht, wenn Wert mit jQuery gesetzt

Ich habe einen Bootstrap-Popup-Dialog mit einigen Formular-Steuerelemente. Jede Kontrolle wurde mit ng-Modell verknüpft. In zwei der Textfelder im Dialog setze ich den Wert mit jquery, wenn das Dialogfeld geöffnet wird, und die restlichen beiden können vom Benutzer bearbeitet werden. die zwei, die Benutzer für sie edg-Modell editierbar sind, funktioniert gut. aber für andere ist es nicht. Wenn ich den Wert selbst ändere, funktionieren sie richtig. aber nicht, wenn der Wert mithilfe von jQuery festgelegt wird. Ich muss den Wert mit jquery festlegen. Kämpfen von vergangenen Tagen. Jede Hilfe wird geschätzt. Hier ist mein Codeng-Modell funktioniert nicht, wenn Wert mit jQuery gesetzt

<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 protected]'); 
    $(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); 
    } 
    });

hier ist eine Geige i für die Ausstellung geschaffen haben

Fiddle

Quelle

2016-04-04 Manish

warum nicht Benutzername, E-Mail direkt in $ Scope statt Eingabe zuweisen? – uzaif

eigentlich habe ich eine Tabelle von Benutzern und wenn eine Schaltfläche für einen bestimmten Benutzer angeklickt wird, öffnet sich dieser Dialog. Die Werte entsprechen dem ausgewählten Benutzer. Wenn es für einen einzelnen Benutzer gewesen wäre, hätte ich es so gemacht. – Manish

Erstellen Sie ein Array von Benutzern und verwenden Sie stattdessen ng-repeat? Kein Grund, Jquery überhaupt zu verwenden. Es empfiehlt sich, JQuery in angular.js zu vermeiden. –

Working Plnkr

Sie können dies tun, indem scope von außen Controller zugreifen.

HTML: Fügen Sie einfach ein id Attribut in HTML hinzu. e.g->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 protected]'; 
     scope.username = 'username'; 
    }); 

});

Hoffnung, die Ihr Problem lösen.

Quelle

2016-04-04 10:39:13

Danke Khalid es hat richtig funktioniert :) – Manish

Gern geschehen :) –

Sie ui.bootstrap Modul verwenden können, die all die harte tun Arbeit, die Sie für Sie tun möchten

Quelle

2016-04-04 10:27:06 Zamboney

können Sie die Werte im Winkelbereich initiieren?

var app = angular.module('my-app', []); 
 

 
    app.controller('Ctrl', function($scope){ 
 

 
$scope.listUser = [ 
 
{email: "[email protected]", username:"test1"}, 
 
{email: "[email protected]", username:"test2"}, 
 
{email: "[email protected]", username:"test3"}, 
 
{email: "[email protected]", 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

Quelle

2016-04-04 10:29:14 anthony

eigentlich kann ich das nicht tun, weil diese Werte basierend auf der ausgewählten Zeile aus einer Tabelle kommen werden – Manish

Kannst du mir ein Beispiel geben? – anthony

Ich habe eine Liste aus der Datenbank abgerufen. und wird unter Verwendung von ng-repeat als Tabelle angezeigt. Wenn also die Schaltfläche einer bestimmten Zeile angeklickt wird, sollen Werte für diese Zeile in die Steuerelemente gelangen. – Manish

ng-Modell funktioniert nicht, wenn Wert mit jQuery gesetzt

Antwort

Verwandte Themen