Question

最初左右会有一组图像。如果我点击左侧的设置图像。它将被移到右侧。右侧栏将显示所选图片，左侧栏显示未选择图片。我将能够一次选择5张图片并提交。如果我单击提交按钮，那5个图像将显示在另一个页面中，发布请求将被发送到服务器。该页面中将有一个按钮称为更改图片按钮。如果我点击它，我需要已选择的图像显示在右侧栏的另一页。

以下是plunker链接https://plnkr.co/edit/BM4AavLn9uKxKL4wdbT6?p=preview

 <body ng-controller="myController">
<div class="row">
  <div class="col-xs-6 col-sm-5 col-md-5">
    <h3 style="text-align: center;text-shadow: 0px 4px 6px;">All Pictures</h3>
    <div class="row" ng-repeat="media in pinMedia">
      <!-- pin.media_id!=media._id || -->
      <div class="col-xs-12 col-sm-12 col-md-5">
        <img ng-src="http://placehold.it/{{images}}" width="200px" />
        <p>{{media.Name}}</p>
        <div class="col-xs-12 col-sm-12 col-md-5">
          <button ng-disabled='limit()' class="btn btn-success" style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="toselected(media)">
            <i class="fa fa-picture-o"></i>
 Set Picture</button >
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-sm-5 col-md-5">
    <h3 style="text-align: center;text-shadow: 0px 4px 6px;">Selected Pictures</h3>
    <div ng-repeat="media in selected">
      <!-- pin.media_id==media._id && -->
      <div>
        <img ng-src="http://placehold.it/{{images}}" width="200px" />
        <p>{{media.Name}}</p>
        <div>
          <a class="btn btn-success " style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="tosource(media)">
            <i class="fa fa-picture-o"></i>
 Remove Picture</a>
        </div>
      </div>
    </div>
  </div>
 <button ng-click="setMediaForCurrentPin(selected)" class="btn btn-success" style="margin:50px auto; display:table;">Submit</button>
</div>

更改Angular JS中已选择图片的图片

0 个答案: