Comment obtenir la valeur d'un élément d'entrée en utilisant angular.element ('# id')

Question

Lorsque j'essaie d'obtenir la valeur d'élément input en utilisant angular.element, il retourne undefined .

$scope.registerUser = function() {
    console.log(angular.element('#username').value); // undefined
    console.log(document.getElementById('username').value); // sampleName
};

Comment puis-je obtenir la valeur en utilisant angular.element

Answer 1

Explication

Vous devez utiliser val méthode similaire à $.fn.val : de jQuery

console.log(angular.element('#username').val());

Vous pouvez également utiliser la propriété value de HTMLInputELement pur:

console.log(angular.element('#username')[0].value);

... parce que angular.element instance est une collection de HTMLElements de type tableau avec chaque élément accessible par son index.

Approche correcte

Mais ... Vous ne devriez jamais lire une valeur d'entrée comme celle-ci dans le contexte de l'application Angular. Utilisez plutôt la directive ngModel et liez directement la valeur en entrée au modèle angulaire:

$scope.registerUser = function() {    
    console.log($scope.username);
};

où en HTML avez-vous 

<input type="text" ng-model="username">

Answer 2

Ça marche pour moi

angular.element(document.getElementById('username')).val();

Answer 3

En plus des moyens ci-dessus, Ceux-ci peuvent également être utilisés:

angular.element('[id="username"]').val();
angular.element('[id="username"]')[0].value;

Answer 4

De la même manière qu'en jQuery, pour lequel angular.element est un wrapper/sub:

angular.element('#username').val();