AngularJs： - 動態將圖像推送到div並將其上傳到AngularJs中的服務器

Question

我正在嘗試實現一種Crm類型的應用程序。我已經實現了一個小功能，我可以從各種選項中選擇一個div。 我給了一個按鈕來推動div中的圖像，還有ng-style來設置屬性。

問題是我使用ng-model來推動div中的圖像。現在因為這個當我試圖將圖像推入一個新的div時，我一遍又一遍地得到相同的圖像。任何人都可以給出解決方案對此

問題是如何控制用戶給出的圖像和參數，同時在UI中顯示相同的內容。

以下是我的代碼.. 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>

以下是我的javascript代碼： -

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

};

請幫幫我..謝謝

Answer 1

雖然目前還沒有顯示來縮小足夠的代碼selectedItem來自於你的模態控制器，下面應該幫助。

使用angular.copy()可防止將同一對象引用推送到數組中

嘗試改變：

$scope.selectedLayouts.push(selectedItem);

至：

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