Bindung des ng-Modells innerhalb der ng-repeat-Schleife in AngularJS

94

Ich versuche, das Problem des Gültigkeitsbereichs innerhalb einer ng-repeat-Schleife zu lösen. Ich habe einige Fragen durchgesehen, konnte meinen Code jedoch nicht zum Laufen bringen.

Controller-Code:

function Ctrl($scope) {
  $scope.lines = [{text: 'res1'}, {text:'res2'}];
}

Aussicht:

<div ng-app>
     <div ng-controller="Ctrl">
       <div ng-repeat="line in lines">
           <div class="preview">{{text}}{{$index}}</div>

       </div>
       <div ng-repeat="line in lines">
           <-- typing here should auto update it's preview above -->
           <input value="{{line.text}}" ng-model="text{{$index}}"/>
            <!-- many other fields here that will also affect the preview -->
       </div>
     </div>
    </div>

Hier ist eine Geige: http://jsfiddle.net/cyberwombat/zqTah/

Grundsätzlich habe ich ein Objekt (es ist ein Flyer-Generator), das mehrere Textzeilen enthält. Jede Textzeile kann vom Benutzer angepasst werden (Text, Schriftart, Größe, Farbe usw.), und ich möchte eine Vorschau dafür erstellen. Das obige Beispiel zeigt nur das Eingabefeld für die Eingabe von Text und ich möchte, dass das Vorschau-Div automatisch / während der Eingabe aktualisiert wird, aber es wird viel mehr Steuerelemente geben.

Ich bin mir auch nicht sicher, ob ich den richtigen Code für den Schleifenindex gefunden habe. Ist dies der beste Weg, um einen ng-Modellnamen innerhalb der Schleife zu erstellen?

javascript angularjs Cyberwombat
quelle
1
Die Geige scheint nicht zu funktionieren.
Philx_x

Antworten:

116

Ist für jede Iteration der ng-repeat-Schleife lineein Verweis auf ein Objekt in Ihrem Array. Verwenden Sie daher zur Vorschau des Werts die Option {{line.text}}.

Ebenso, um Daten an den Text zu binden, Daten an denselben zu binden : ng-model="line.text". Sie müssen nicht verwenden, valuewenn Sie ng-model verwenden (eigentlich sollten Sie nicht).

Geige .

Weitere Informationen zu Scopes und ng-repeat finden Sie unter Was sind die Nuancen der prototypischen / prototypischen Vererbung von Scopes in AngularJS? , Abschnitt ng-Wiederholung .

Mark Rajcok
quelle
Was ist mit dem e2e-Test dieses Codes? Ich meine, wie man einen Eingang auswählt, wenn sein Modell dynamisch ist?
Devmao
1
Müssen die iterierten Elemente dann Objekte sein? Mit anderen Worten, sie können keine Grundelemente wie Zeichenfolgen sein, z. B. $ scope.lines = ['a', 'b', 'c']?
Berto
2
@berto, ja, sie müssen Objekte sein. Dies wird in der verknüpften Referenz "Was sind die Nuancen des Scope Prototypal ..." erläutert.
Mark Rajcok
Ich habe ein ähnliches Problem mit ng-repeat / ng-model. Ich habe einige Nachforschungen angestellt und denke, ich bin fast da. Wenn jemand einen Blick darauf werfen könnte, würde ich es wirklich schätzen. stackoverflow.com/questions/32855575/…
user1532669
2 
<h4>Order List</h4>
<ul>
    <li ng-repeat="val in filter_option.order">
        <span>
            <input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
            &nbsp;{{filter_option.order_name[$index]}}
        </span>
        <select title="" ng-model="filter_param[val]">
            <option value="asc">Asc</option>
            <option value="desc">Desc</option>
        </select>
    </li>
</ul>
imdba
quelle