2015-06-01 15 views
5

Ich bin neu in Angular, und ich versuche etwas wirklich grundlegendes zu tun. Hier ist ein Teil einer Ansicht (alle Winkel Dateien hinzugefügt werden an anderer Stelle):

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

Und hier ist mein Controller:

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

    // get the scope value here 
}]); 

Was ich tun werde versuchen, ist wirklich einfach. Ich möchte den Eingabewert verwenden. Ich versuchte etwas wie $scope.data = [] und $scope.data.push($scope.id), um ein Array mit dem Wert des Bereichs zu erstellen, aber es hat nicht funktioniert. Als ich versuchte, den Wert anzuzeigen, bekam ich auf der Konsole ein 'undefined'.

Haben Sie eine Idee?

Edit: Die Ansicht hat auch eine Schaltfläche mit der ng-click Direktive, die die Funktion des Controllers auslösen, wo ich versuche, meinen Wert zu bekommen.

+3

Haben Sie etwas in die 'input' geben? – tymeJV

+0

Ich tippe etwas, und (ich habe es nicht auf den ursprünglichen Beitrag geschrieben) Ich habe eine Schaltfläche, mit einem 'ng-Klick' Direktive mit einer Funktion in der Steuerung verknüpft. – Arhyaa

+0

Bearbeiten Sie den Titel der Frage so, dass er das Problem anzeigt, dem Sie gegenüberstehen. "Ich versuche nur ein paar grundlegende Dinge mit AngularJS's ngModel zu tun" sagt mir nichts. Du würdest deine Eltern nicht fragen: "Ich versuche, etwas mit einem Herd zu kochen" ... "Okay, was ist die Frage? Was kochst du? Was ist das Problem?". – Jonast92

Antwort

10

Der Wert wird automatisch zum $scope hinzugefügt, aber Sie müssen etwas in das Element input eingeben.

Das heißt, Sie müssen etwas auslösen, um diesen Wert zu erhalten. Zum Beispiel, wo Sie Ihren Kommentar // get the scope value here haben - dies wird ausgelöst, sobald der Controller initialisiert und nie wieder aufgerufen wird; Also wird es zu dieser Zeit undefiniert loggen. Allerdings, wenn Sie es auf eine Schaltfläche klicken gesetzt, oder etwas, sehen Sie, es ist verfügbar:

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

Und Ihre Controller:

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

nun etwas in die Eingabe eingeben und auf die Schaltfläche klicken.

+0

Hmm, mein Schlechter, habe ich vergessen, es zu erwähnen.Ich habe eine Schaltfläche in der Ansicht, mit einer 'ng-Klick'-Direktive, die mit einer Funktion im Controller verknüpft ist, um sie auszulösen. Ich werde es zum ursprünglichen Beitrag hinzufügen! – Arhyaa

+0

Können Sie eine [jsBin] (http://jsbin.com) oder [jsFiddle] (http://jsfiddle.net) bereitstellen, die nicht funktioniert? Der von mir bereitgestellte Code funktioniert einwandfrei: http://jsbin.com/wuhiciwibi/1/edit?html,js,console,output @Arhyaa – Tom

+0

Ich wechsle von 'angular.min.js' zu' angular.js' in der Hauptsache sehen, und es hat funktioniert. – Arhyaa

0

Wenn Sie es in Array wirklich, nur tun dies in Ihrem Controller:

$scope.data = [0];

und in HTML tun <input type="text" ng-model="data[0]">

Es wird das Array Wert füllen automaticaly, wie Sie etwas eintippen INPUT, ID steht immer an erster Stelle im Array.

Oder Sie können damit umgehen mit dem Objekt In Controller: $scope.data = {};

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

Verwandte Themen