我正在尝试实现 Crm 类型的应用程序。我已经实现了一个小功能，我可以在其中从各种选项中选择一个 div。我给了一个按钮来将图像推送到 div 中，还提供了 ng 样式来设置属性。

问题是我已经使用 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());
  });

};

请帮帮我.. 谢谢

最佳答案

虽然没有显示足够的代码来缩小 selectedItem 在模态 Controller 中的来源，但以下内容应该有所帮助。

使用 angular.copy() 防止将相同的对象引用压入数组

尝试改变:

$scope.selectedLayouts.push(selectedItem);

收件人:

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

关于javascript - AngularJs:-如何在 AngularJs 中将图片动态推送到 div 并上传到服务器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38300326/