angular.js, nicht Bearbeiten können dynamisch erstellte input-Felder

Verwenden angular.js ich habe eine dynamische Liste der Formular-Felder, die ich anzeigen möchten, die dem Benutzer für die Bearbeitung (und später Einreichung):

var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
    $scope.fields = {
        foo: "foo",
        bar: "bar",
        baz: "baz"
    };
});

Und HTML:

<div ng-app="app" ng-controller="Ctrl">
    <table>
        <th>key</th>
        <th>value</th>
        <th>fields[key]</th>
        <tr ng-repeat="(key,value) in fields">
            <td>{{key}}:</td>
            <td><input type="text" ng-model="value"/></td>
            <td><input type="text" ng-model="fields[key]"/></td>
        </tr>
    </table>
</div>

Sehen diese Geige. Für einem Grund ich nicht verstehen, den text-Eingabe-Felder sind nicht editierbar. Ich habe versucht, zwei verschiedene Möglichkeiten, wie oben gesehen: value und fields[key]. value ist nicht bearbeitbar, und fields[key] ermöglichen eine Tastendruck und dann verwischt. Was mache ich falsch? Danke.

es ist sichtbar, aber nach jedem Tastendruck das Textfeld Fokus verlieren, so dass Sie haben, klicken Sie auf ihn erneut, um einen anderen char
Und das passiert, weil Sie ganze Vorlage neu gerendert wird nach jeder änderung in jedem der Modelle. Und nach Vorlage neu gerendert, es gibt derzeit keine Möglichkeit zu wissen, welcher Eingang den Fokus. So erstellen Sie auf diese Weise und Sie können schreiben wollen, die Richtlinie zu halten, konzentrieren sich auf ausgewählte Eingabe.
Danke @SET, das macht Total Sinn, Sie sollten machen, dass eine Antwort!
mögliche Duplikate von Schwierigkeiten mit ng-model, ng-repeat und-Eingänge
Danke @Mark Rajcok, meine Frage ist definitiv ein Teil des einen, und es sind einige gute Erklärungen gibt.

InformationsquelleAutor Steve Kehlet | 2013-02-27

angularjs

3

Ist es editierbar, aber nach jedem Tastendruck das Textfeld Fokus verlieren, so dass Sie haben, klicken Sie auf ihn erneut, um einen anderen char.

- Und das geschieht, weil Sie ganze Vorlage neu gerendert wird nach jeder änderung in jedem der Modelle. Und nach Vorlage neu gerendert, es gibt derzeit keine Möglichkeit zu wissen, welcher Eingang den Fokus. So erstellen Sie auf diese Weise und Sie können schreiben wollen, die Richtlinie zu halten, konzentrieren sich auf ausgewählte Eingang.
- In der Antwort, die ich zur Verfügung gestellt (es verwendet ein array von Objekten), das input-Feld nicht den Fokus verlieren, wenn Sie es, aber das Modell ist im Wandel. Wissen Sie, warum fields[key] Ursache einer re-Rendern, aber nicht field.value?
- das ist eigentlich das, was ich im Begriff war, Sie zu Fragen. Nein habe ich nicht, aber bereit nicht wissen. Auch, nachdem ich die Lösung gefunden mit arrays, die wirklich funktionieren, ich vermute, mein post sollte nicht gewählt werden, als Antwort.
- Ihre Antwort sofort und erklärte, was das problem war und beantwortet meine Frage "was mache ich falsch?", so ich werde die Antwort, die Kredit zu Sie. Nochmals vielen Dank!
InformationsquelleAutor SET

SATZ beantwortet, warum es passiert, aber ein work-around zu erreichen, das gewünschte Verhalten wäre, dass eine separate array von Schlüssel und Lauf ng-repeat off diese Tasten. Ich habe einige Textfelder für die Tests auf weitere Eigenschaften hinzufügen, um $scope.fields

Könnten Sie $watch dynamisch einstellen die Tasten, wenn die Eigenschaft "count" ändert sich, wenn sich Ihre Anforderungen waren, dass das Feld Anzahl kann sich ändern.

http://jsfiddle.net/aERwc/10/

markup

<div ng-app="app" ng-controller="Ctrl">
    <table>
        <th>key</th>
        <th>value</th>
        <tr ng-repeat="key in fieldKeys">
            <td>{{key}}:</td>
            <td><input type="text" ng-model="fields[key]"/></td>
        </tr>
    </table>
    <div><h6>Add a field</h6>
        key: <input type="text" ng-model="keyToAdd" /><br />
        value: <input type="text" ng-model="valueToAdd" />
        <button ng-click="addField()">Add Field</button>
    </div>
</div>

controller

var app = angular.module('app', []);

app.controller('Ctrl', function($scope) {
    $scope.fields = {
        foo: "foo",
        bar: "bar",
        baz: "baz"
    };
    $scope.fieldKeys = [];

    $scope.setFieldKeys = function() {
        var keys = [];
        for (key in $scope.fields) {
            keys.push(key);
        }
        $scope.fieldKeys = keys;
    }

    $scope.addField = function() {
        $scope.fields[$scope.keyToAdd] = $scope.valueToAdd;
        $scope.setFieldKeys();
        $scope.keyToAdd = '';
        $scope.valueToAdd = '';
    }

    $scope.setFieldKeys();
});

Das ist genau, was ich tun werde, als ein workaround. Tolle Sachen, danke!
+1: das löst das problem ohne änderung des Datenmodells. Die setFieldKeys Methode ersetzt werden kann, wie $scope.fieldKeys = Object.keys(data); glaube ich.

InformationsquelleAutor Coder1

3

Müssen Sie verwenden ein array von Objekten. Hoffentlich können Sie überarbeiten Ihr Modell:
```
$scope.fields = [
   {label: "foo", value: "foov"},
   {label: "bar", value: "barv"},
   {label: "baz", value: "bazv"}
];

<tr ng-repeat="field in fields">
  <td>{{field.label}}:</td>
  <td><input type="text" ng-model="field.value">
```
Fiddle.
- Danke!!! Ich mag auch auf diese Weise, als eine gekapselte alternative zu der Antwort von @Coder1. Egal was ich jetzt sehe werde ich zum transformieren der Daten von der server irgendwie. Ich befürchte jedoch, dass dieser Ansatz ist die Nutzung etwas absichtlich oder nicht, zu Eckig, die es nicht tun, deep inspection, auf die beobachtete fields array (meine möglicherweise falsche Schlussfolgerung, wie das funktioniert), und dies könnte sich in Zukunft ändern.
InformationsquelleAutor Mark Rajcok

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.