Angular update ng-model in ng-repeat

Grundsätzlich versuche ich einen Weg zu finden, einen ausgewählten Wert (zB von einem Modal) an ein bestimmtes Modell zurückzugeben, wenn dieses Modell dynamisch über ng-repeat generiert werden kann .Angular update ng-model in ng-repeat

So ist das, was meine Daten wie folgt aussehen:

{ 
    "title": "Example Title", 
    "enabled": true, 
    "thumbnailImage": "file1.png", 
    "content": [{ 
     "order": 0, 
     "type": "wysiwyg", 
     "content": "<div>This is wysiwyg content!</div>" 
    }, 
    { 
     "order": 1, 
     "type": "image", 
     "content": "file2.png" 
    }], 
    "id": 1 
}

Nun kann der Benutzer durch Klicken auf eine Schaltfläche zu erzeugen zusätzliche Inhalte halten, die mit ihrem gewählten Typ auf den ‚Inhalt‘ Array ein neues Objekt erstellt. So kann ein Artikel ein Inhaltsbild oder ein Hundert oder keines haben (aber wird immer das "thumbnailImage" haben).

Mit https://github.com/nervgh/angular-file-upload habe ich ein Modal hinzugefügt, mit dem Benutzer entweder eine neue Bilddatei hochladen oder ein vorhandenes Bild vom Server auswählen können. So sieht mein HTML ein bisschen wie diese (für den ng-repeat Inhalt - ähnlich für thumbnailImage):

<div class="Control"> 
    <label>Content</label> 
    <div class="panel panel-default" ng-repeat="block in article.content"> 
    <div class="panel-body"> 
     <!-- ... other content types here ... --> 
     <div ng-if="block.type == 'image'"> 
     <input type="text" 
       ng-model="block.content" 
       ng-if="block.type == 'image'" 
       class="form-control" 
     > 
     <a ng-click="selectImage()" class="btn btn-primary">Select image</a> 
     <button type="button" ng-if="!!activeImage" ng-click="block.content = activeImage" class="btn btn-secondary">Insert image</button> 
     </div> 
    </div> 
    </div> 
</div>

selectImage() öffnet die modal, füllt sie mit allen Dateien, die bereits auf den Server hochgeladen, und hat eine Drag-and-Drop-Bereich, mit dem Benutzer neue Bilder hochladen können.

Die modale wie folgt aussieht:

<div ng-if="showFileManager" nv-file-drop uploader="uploader"> 
    <div class="row"> 
     <div ng-repeat="file in files" class="col-3"> 
      <img ng-src="/{{ file.container }}/{{ file.name }}" ng-click="setActiveImage(file)"> 
     </div> 
    </div> 
    <div ng-show="uploader.isHTML5"> 
     <div nv-file-over uploader="uploader"> 
      Drag and drop images to upload 
     </div> 
    </div> 
</div>

Was ich versuche, sofort zu tun ist, um ein Bild auf der Auswahl, bevölkern die Texteingabe auf die ‚selectImage()‘ Taste zusammen.

Im Moment eines Bildes Feuer ‚setActiveImage()‘ klicken, das ist:

$scope.setActiveImage = function(file) { 
     var filePath = 'http://localhost:3000/uploads/' + file.container + '/' + file.name; 
     $scope.activeImage = filePath; 
    };

Und dann der ‚Bild einfügen‘ Button unter jedem Bild auf die ‚Select Bild‘ Schaltfläche neben aktualisiert das Modell . Ich hoffe jedoch, dies im Modal tun zu können, so dass der Benutzer nur noch auf die modale Schaltfläche "Schließen" klicken muss und das Feld ausgefüllt ist.

Macht das Sinn, und ist es möglich?

Quelle

2016-07-21 Ben

Ist modale Arbeits bereits Bilder angezeigt werden? Hat es einen eigenen Controller? – charlietfl

Ja, tut es. Ich glaube, ich verwirrte mich nur und machte es schwieriger als nötig - Jinws Lösung funktioniert perfekt. – Ben

Die Art und Weise, wie ich ein bestimmtes Element von ng-repeat bekomme, besteht darin, es einer Funktion aus meiner Sicht zu übergeben.

<html element ... useSelectedFile(file)></html element>

Dann in Ihrem Controller:

$scope.useSelectedFile = useSelectedFile; 

function useSelectedFile(file){ 
    //do stuff 
    //call function 
    //set scope item in view to file 
}

Quelle

2016-07-21 02:18:49 Jinw

Doh, ich habe es übertrieben. Ja, das funktioniert perfekt. Danke, Jinw – Ben

Sie sind herzlich willkommen! Ich mache meinen Code auch viel komplizierter, es ist einfach zu machen. – Jinw

Angular update ng-model in ng-repeat

Antwort

Verwandte Themen