AngularJs:-how to dynamically push images into div and upload it to server in AngularJs

Question

I am trying to implement a Crm kind of application..I have implemented a small feature in which I can select a div from various options. I have given a button to push the image in the div and also ng-style to set the properties.

The problem is I have used ng-model to push the image in the div..Now because of this when I am trying to push images into a new div I am getting the same image over and over again.Can anyone please give the solution to this

The issue is how do I control the image and the parameters which are given by the user and simultaneously display the same thing in the UI.

The below is my 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>

the below is my 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());
  });

};

Please help me out.. Thanks

Answer 1

Although there isn't enough code shown to narrow down where selectedItem comes from in your modal controller , the following should help.

Use angular.copy() to prevent pushing the same object reference into array

Try changing:

$scope.selectedLayouts.push(selectedItem);

To:

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