ng-Modell nicht aktualisiert Eingang richtig

Ich habe diese gleiche Funktion auf einer anderen Seite und es funktioniert wunderbar, aber für das Leben von mir kann nicht herausfinden, warum es nicht in einem zweiten Implemenation arbeiten:ng-Modell nicht aktualisiert Eingang richtig

Wenn die userPhone Die Eingabe beginnt leer, und ich fange an, eine Nummer einzugeben, alles, was ich bekomme, ist das folgende immer und immer wieder. Aber warum sollte len.length = 0 der Moment sein, in dem ich eine Zahl in das Eingabefeld eintippe, technisch sollte die Länge mindestens 1 sein. Ich sehe, was passiert, nachdem $ Scope.userPhone NaN zugewiesen wird - also ist die neue Länge jetzt 3 ... aber selbst wenn ich mehr Zahlen tippe, ändert es sich nie oder aktualisiert sich. $ scope [itemID] ($ scope.userPhone) richtig.

len: 0 
THere! NaN 
len: 3 
THere! NaN 
len: 3 
THere! NaN

und wenn es beginnt mit einer Zahl aus schon drin, und ich einige löschen oder einige Zahlen addieren ich folgendes: len: 10 - immer und immer wieder. Egal ob die sichtbare Länge 0 3, 5 oder 15 ist. Wie $ scope.userPhone ($ scope [itemID]) wird das Eingabefeld nie aktualisiert. Da Länge 10 ist, macht es nie in die erste IF, die Länge zu kürzen.

HTML

<input type="number" id="userPhone" ng-model="userPhone" ng-change="monitorLength('userPhone',10)" ng-blur="verify('userPhone',10)">

JS $ scope Variablen für eine Vorlage erstellt werden:

var regFields = ["userNameFirst","userNameLast","userPhone","userEmail","userAddress1", 
      "userAddress2","userCity","userState","userZip","userCountry","userCardType", 
      "userCardNumber","userCardMonth","userCardYear","userCardCSV"] ;

build $ scope Vars

var reg = new RegExp(/^\d+$/) ; 
    for (var x=0;x<regFields.length;x++) { 
    var val = getDB(regFields[x]) ; 
    if (reg.test(val)) { // is a number, convert back to data type number 
     val = parseInt(val) ; 
    } 
    console.log("creating $scope: "+regFields[x]+ " w/ value: "+val+ " as "+typeof(val)) ; 
    $scope[regFields[x]] = val ; 
    } 


$scope.monitorLength = function(itemID,maxLength) { 
    if ($scope[itemID] != null) { 
    var len = $scope[itemID].toString() ; 
    console.log("len: "+len.length) ; 
    if (len.length > maxLength) { 
     $scope[itemID] = parseInt(len.substring(0, maxLength)); 
     console.log("Here! " + $scope[itemID]) ; 
    } else if (!reg.test(len)) { 
     $scope[itemID] = parseInt(len.substring(0, len.length-1)); 
     console.log("THere! " + $scope[itemID]) ; 
    } 
    } 
}

Quelle

2016-10-12 rolinger

Need a [MCVE] zur Verfügung zu stellen. Wir haben keine Ahnung, was in Ihrem Umfang ist und haben keine Möglichkeit, Ihr Problem zu reproduzieren. Sie brechen auch die goldene Regel, kein Objekt in 'ng-model' zu verwenden – charlietfl

Senden Sie zunächst keine itemID, sondern das eigentliche Element' ng-change = "monitorLength (userPhone, 10)'. Überschreiben Sie dann nicht, was ist im Bereich [itemID], aber verwenden Sie eine andere Variable: 'var update = + (String (Element) .substring (0, maxLength)); console.log (update);' – floribon

@floribon - Ihre Methode übergibt den Wert von userPhone in die monitorLength Funktion ... aber einmal in und das Update zur Verfügung gestellt wird, wie dann übergeben Sie die neue "update" (wenn über MaxLength) zurück auf die richtige $ Scope-Variable? – rolinger

ich gelöst, aber ich verstehe nicht, warum, vielleicht kann mir jemand das erklären.

Meine ursprüngliche $ scope Variablenzuweisungen waren wie folgt, Daten in von localstorage Lesen:

var regFields = ["userNameFirst","userNameLast","userPhone","userEmail","userAddress1","userAddress2","userCity","userState","userZip","userCountry", 
     "userCardType","userCardNumber","userCardMonth","userCardYear","userCardCSV"] ; 
    var reg = new RegExp(/^\d+$/) ; 
    for (var x=0;x<regFields.length;x++) { 
    var val = getDB(regFields[x]) ; 
    if (reg.test(val)) { // is a number, convert back to data type number 
     val = parseInt(val) ; 
    } 
    $scope[regFields[x]] = val ; 
    }

habe ich es dann zu:

$scope.userObj = {} ; 
    var regFields = ["userNameFirst","userNameLast","userPhone","userEmail","userAddress1","userAddress2","userCity","userState","userZip","userCountry", 
      "userCardType","userCardNumber","userCardMonth","userCardYear","userCardCSV"] ; 
    var userObj = {} ; 
    var reg = new RegExp(/^\d+$/) ; 
    for (var x=0;x<regFields.length;x++) { 
    var val = getDB(regFields[x]) ; 
    if (reg.test(val)) { // is a number, convert back to data type number 
     val = parseInt(val) ; 
    } 
    $scope.userObj[regFields[x]] = val ; 
    }

und dann alle meine Modell entsprechend geändert wurden:

from: ng-model="userPhone" to ng-model="userObj.userPhone"

Warum funktioniert die Zuweisung alles in einem einzigen $ scope.object gegen Erstellen Sie einfach einen eindeutigen $ scope.var für jeden von localStorage eingelesenen Schlüssel?

@charlietfl

Quelle

2016-10-13 16:40:50 rolinger

ng-Modell nicht aktualisiert Eingang richtig

Antwort

Verwandte Themen