AngularJs: - görüntüleri dinamik olarak div'e aktarma ve AngularJs

Question

'a yüklemeyi seviyorum. Bir Crm türünü uygulamaya çalışıyorum. Çeşitli seçenekler arasından bir div seçebileceğim küçük bir özellik uygulamıştım. Görüntüyü div içinde itmek için bir düğme verdim ve ayrıca özellikleri ayarlamak için ng stili.

Sorun şu ki görüntüyü div'a itmek için ng-modelini kullandım. Bu yüzden görüntüleri yeni bir div'a aktarmaya çalıştığımda bundan dolayı tekrar aynı görüntüyü alıyorum. lütfen bu

için çözümü verin. Sorun, kullanıcı tarafından verilen görüntü ile parametreleri aynı anda nasıl kontrol edebilirim ve aynı şeyi UI'de görüntüler.

 <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> 

altındadır benim javascript kodu: - -:

$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()); 
    }); 

}; 

bana yardım edin .. Teşekkür

Answer 1

aşağıda cms.html .. benim kodudur Modal denetleyicide selectedItem'un nereden geldiğini göstermek için yeterli kod bulunmadığı halde, aşağıdakiler yardımcı olacaktır.

Kullanım angular.copy() dizide

içine aynı nesne başvurusu iterek önlemek için değiştirmeyi deneyin:

$scope.selectedLayouts.push(selectedItem); 

için:

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