web-dev-qa-db-fra.com

Comment obtenir une valeur d'entrée dans la portée $ angulaire?

Je suis nouveau sur Angular et j'essaie de faire quelque chose de vraiment basique. Voici une partie d'une vue (tous les angular sont ajoutés ailleurs):

 <div ng-controller='ctrl'>
    <input type='text' ng-model='id'>
 </div>

Et voici mon contrôleur:

 module.controller('ctrl',['$scope', function ($scope) {

    // get the scope value here
}]);

Ce que j'essaie de faire est vraiment simple. Je voudrais utiliser la valeur d'entrée. J'ai essayé quelque chose comme $scope.data = [] Et $scope.data.Push($scope.id) pour créer un tableau avec la valeur de la portée, mais cela n'a pas fonctionné. Lorsque j'ai essayé d'afficher la valeur, j'ai obtenu un "non défini" sur la console.

Avez-vous une idée?

Edit: La vue a également un bouton avec la directive ng-click Qui déclenche la fonction du contrôleur où j'essaye d'obtenir ma valeur.

9
Arhyaa

La valeur sera automatiquement ajoutée au $scope, mais vous devez taper quelque chose dans l'élément input.

Cela dit, vous devez déclencher quelque chose pour obtenir cette valeur. Par exemple, où vous avez votre commentaire // get the scope value here - ceci est déclenché dès que le contrôleur est initialisé et n'est plus appelé; donc, ça va se connecter indéfini à ce moment-là. Cependant, si vous le définissez sur un clic de bouton, ou quelque chose, vous verrez qu'il est disponible:

<div ng-controller='ctrl'>
   <input type='text' ng-model='id'>
   <button ng-click="logId()">Log ID</button>
</div>

Et votre contrôleur:

module.controller('ctrl',['$scope', function ($scope) {
    $scope.logId = function() {
        console.log($scope.id);
    }
}]);

Tapez maintenant quelque chose dans l'entrée et cliquez sur le bouton.

15
Tom

Si vous en avez vraiment besoin en baie, faites-le simplement dans votre contrôleur:

$scope.data = [0];

et en HTML, faites <input type="text" ng-model="data[0]">

Il remplira automatiquement cette valeur de tableau lorsque vous tapez quelque chose dans INPUT, id sera toujours en première position dans le tableau.

Ou vous pouvez le gérer avec un objet Dans le contrôleur: $scope.data = {};

en HTML <input type="text" ng-model="data.id">

0