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