Lesezugriff nur mit ng-readonly dynamisch funktioniert nicht

Question

Ich erhalte einige Daten vom Datenbankserver und zeige sie in tabellarischem Format auf meiner GUI an. Ich möchte Folgendes in meinem GUI-Design erreichen:

(a) Jede Zelle in der Tabelle sollte bearbeitbar sein mit Ausnahme der ersten Spalte in der Tabelle. (b) Die erste Zeile der Tabelle sollte, wenn sie der GUI zum Akzeptieren neuer Eingaben von dem Benutzer neu hinzugefügt wird, von der obigen Regel ausgenommen werden, d. H. Alle Spalten der ersten Zeile sollten editierbar sein.

Um dies zu erreichen, schrieb ich den folgenden Code.

HTML-Code

<tbody> 
      <tr ng-repeat="x in sensordata"> 
      <td> 
      <input class="form-control" type="text" ng-model="x.name" placeholder="Sensor name" ng-readonly="namereadonly" ng-init="ctrl2.setReadOnly(x.name,$index)"/> 
      </td> 
      <td> 
       <input class="form-control" type="text" ng-model="x.unit" placeholder="Measurement Unit" required/> 
      </td> 
      <td> 
       <input class="form-control" type="text" ng-model="x.type" placeholder="Sensor Type" required/> 
      </td> 
      <td> 
       <input class="form-control" type="text" ng-model="x.periodicity" placeholder="Periodicity" required/> 
      </td> 
      <td> 
       <input class="form-control" type="text" ng-model="x.formula" placeholder="Formula" required/> 
      </td> 
      <td> 
       <input class="form-control" type="email" ng-model="x.vendor" placeholder="Email Id" required/> 
      </td> 
      </tr> 
    </tbody> 

Controller-Code ist wie folgt.

Wenn ich obigen Code ausführe, wird die erste Spalte aller Zeilen wie erwartet nicht bearbeitet. Aber wenn ich eine neue Zeile hinzufüge (indem ich ein neues leeres JSON-Objekt in das Sensordata-Array in einer anderen Funktion des gleichen Controllers eintrage), wird die erste Spalte der Zeile nicht editierbar, was laut dem ersten if nicht der Fall sein sollte Aussage in der obigen Methode. Ich kann nicht herausfinden, warum es passiert.

Answer 1

<input class="form-control" type="text" ng-model="x.name" placeholder="Sensor name" ng-model-options="{ updateOn: 'blur' }" ng-readonly="x.name.length"/> diese Linie mein Problem gelöst setzen. Ohne das Attribut ng-model-options, sobald man ein Zeichen in die neu hinzugefügte Zeile eingibt, wird die erste Spalte nicht mehr bearbeitet. Mit ng-model-options wird dieses Problem gelöst, da die Spalte beim Verschieben des Fokus aus dem Eingabefeld nicht mehr bearbeitet werden kann.

In der Steuerung soll keine Methode geschrieben werden.

Answer 2

können Sie if else Anweisung versuchen, die die Variable

this.setReadOnly = function(name,idx) { 
    console.log('name ' + name + ' idx ' + idx); 
    if (name === undefined || name === null || name === '') $scope.namereadonly = false; 
    else (name !== '' || name !== undefined || name !== null) $scope.namereadonly = true; 
}; 

Answer 3

a) Jede Zelle in der Tabelle richtig setzen soll die Tabelle in mit Ausnahme der ersten Spalte bearbeitet werden. (b) Die erste Zeile der Tabelle sollte, wenn sie neu zur GUI zum Akzeptieren neuer Eingaben von dem Benutzer hinzugefügt wird, von der obigen Regel befreit werden, d. h. alle Spalten der ersten Zeile sollten editierbar sein.

Es gibt viele Lösungen, aber es hängt von Ihnen/Ihren Bedürfnissen ab. Hier würde Ich mag Sie 2 Logiken teilen:

• Hinzufügen neuer Schlüssel für das neue Objekt vom Benutzer eingegeben und verwenden Sie diesen neuen Schlüssel zu deutlichen sie mit alten Objekt ng-readonly="x.new" und neue Objekt sollte diesen Schlüssel haben: {name:"", new: true}

• Shop die Länge des Hauptarray, und das das neue Objekt eingegebene ng-readonly="$index < mainlength" und mainlength zu deutlichen verwenden ist so etwas wie: $scope.mainlength = angular.copy($scope.sensordata.length) (Verwendung von angular.copy) http://plnkr.co/edit/zCcyPTG3EybL4IjsOpz4?p=preview siehe

Answer 4

können Sie den Zustand direkt in ng-Nur-Lese wie unten

<input class="form-control" type="text" ng-model="x.name" placeholder="Sensor name" ng-readonly="{{x.name !== '' && x.name !== undefined && x.name !== null}}" />