AngularJs: -wie dynamisch Bilder in div schieben und es auf Server in AngularJs hochladen

Question

Ich versuche, eine Crm-Art der Anwendung zu implementieren .. Ich habe eine kleine Funktion implementiert, in der ich ein Div aus verschiedenen Optionen auswählen kann. Ich habe eine Schaltfläche angegeben, um das Bild im Div- und auch im NG-Stil zu verschieben, um die Eigenschaften festzulegen.

Das Problem ist, ich habe ng-Modell verwendet, um das Bild in der div..Now deshalb, wenn ich versuche, Bilder in eine neue Div schieben Ich bekomme das gleiche Bild immer und immer wieder.Kann jemand bitte geben Sie die Lösung dazu

Das Problem ist, wie ich das Bild und die Parameter, die vom Benutzer gegeben sind, steuern und gleichzeitig das gleiche in der Benutzeroberfläche anzeigen.

Die unten ist mein Code .. cms.html: -

 <div id="picture_container" style="display:none"> 
      <div>Display Picture 1: 
      <input type="file" ngf-select="" ng-model="picFile" name="file" ngf-accept="'image/*'" required=""> 
      <i ng-show="myForm.file.$error.required">*required</i> 
      </div> 
      <div>Display Picture 2: 
      <input type="file" ngf-select="" ng-model="picFile1" name="file" ngf-accept="'image/*'" required=""> 
      <i ng-show="myForm.file.$error.required">*required</i> 
      </div> 
      <div>Display Picture 3: 
      <input type="file" ngf-select="" ng-model="picFile2" name="file" ngf-accept="'image/*'" required=""> 
      <i ng-show="myForm.file.$error.required">*required</i> 
      </div> 
    </div> 

    <div class="home-page container" id="admin-cont" style="margin-bottom: 50px;padding-top: 20px;"> 
     <div ng-repeat="layout in selectedLayouts track by $index" class="" style="margin-bottom: 35px;position:relative;"> 
      <div ng-if="picFile" class="internal" ng-style="{'color': myColor || '#000','left':myLeft || '50%','top':myTop || '50%', 
      'font-size':myFont || '14px'}" style="position:absolute;" contenteditable="true">{{myText}}</div> 
      <div ng-if="picFile" class="internal" ng-style="{'color': myColor || '#000','left':myLeft || '50%','top':myTop || '50%', 
      'font-size':myFont || '14px'}" style="position:absolute;padding-top:14px;" contenteditable="true">{{myText1}}</div> 
      <ng-include src="layout" class></ng-include> 
     </div> 
     </div> 

<script type="text/ng-template" id="grid-12"> 
    <div class="row" id="grid-121"> 
    <div class="col-sm-12" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <!-- <img ngf-src="picFile" class="img img-responsive"> --> 
     <ng-repeat="imageSource in imageSources track by $index" /> 
     <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> 
    </div> 
    </div> 
</script> 
<script type="text/ng-template" id="grid-8-4"> 
    <div class="row"> 
    <div class="col-sm-8" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <img ngf-src="picFile" class="img img-responsive"> 
    </div> 
    <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <img ngf-src="picFile1" class="img img-responsive"> 
     <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> 
    </div> 
    </div> 
</script> 
<script type="text/ng-template" id="grid-6-6"> 
    <div class="row"> 
    <div class="col-sm-6" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <img ngf-src="picFile" class="img img-responsive"> 
    </div> 
    <div class="col-sm-6" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <img ngf-src="picFile1" class="img img-responsive"> 
     <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> 
    </div> 
    </div> 
</script> 
<script type="text/ng-template" id="grid-4-8"> 
    <div class="row"> 
    <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <img ngf-src="picFile" class="img img-responsive"> 
    </div> 
    <div class="col-sm-8" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <img ngf-src="picFile1" class="img img-responsive"> 
     <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> 
    </div> 
    </div> 
</script> 
<script type="text/ng-template" id="grid-4-4-4"> 
    <div class="row"> 
    <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <img ngf-src="picFile" class="img img-responsive"> 
    </div> 
    <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <img ngf-src="picFile1" class="img img-responsive"> 
    </div> 
    <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> 
     <img ngf-src="picFile2" class="img img-responsive"> 
     <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> 
    </div> 
    </div> 
</script> 

die unten ist mein Javascript-Code: -

$scope.items = ['grid-12', 'grid-6-6', 'grid-4-8', 'grid-8-4', 'grid-4-4-4']; 
$scope.selectedLayouts = []; 

$scope.open = function() { 

    var modalInstance = $uibModal.open({ 
    animation: true, 
    templateUrl: 'layoutTemplateModal.html', 
    controller: $scope.LayoutModalCtrl, 
    size: 'lg', 
    resolve: { 
     items: function() { 
     return $scope.items; 
     } 
    } 
    }); 

    modalInstance.result.then(function(selectedItem) { 
    $scope.selectedLayouts.push(selectedItem); 

    }, function() { 
    $log.info('Modal dismissed at: ' + new Date()); 
    }); 

}; 

Bitte helfen Sie mir .. Dank

Answer 1

Obwohl es nicht genügend Code gibt, um einzugrenzen, woher in Ihrem modalen Controller kommt, sollte das Folgende helfen.

Verwenden angular.copy() verhindern, dass das gleiche Objekt Referenz in Array schieben

Versuchen verändert sich:

$scope.selectedLayouts.push(selectedItem); 

An:

$scope.selectedLayouts.push(angular.copy(selectedItem));