1

我有 2 列，第一列是 Unselected images 和旁边的名为Select picture的按钮，第二列是选定的图像和名为Remove picture的按钮。如果我单击左栏中的一张图像的选择图片按钮，它应该移动到右侧栏中，并且应该在左侧栏中消失。
反之亦然删除图片。如果我单击右侧的删除图片，它应该会在右侧消失并出现在左侧。我应该能够选择并删除多张图片。我用过角度js。谁能帮我
Plunker在这里https://plnkr.co/edit/rtJP91MtYISyVZkdFWr8?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" ng-init="setMedia=[]">
        <!-- pin.media_id!=media._id || -->
            <div ng-show="!setMedia[$index]" class="col-xs-12 col-sm-12 col-md-5">
                <img ng-src="http://placehold.it/{{images}}" width="200px">
                <div  class="col-xs-12 col-sm-12 col-md-5">
                    <a class="btn btn-success" style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="setMedia[$index]=false"><i class="fa fa-picture-o"></i> Set Picture</a>
                </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 pinMedia">
        <!-- pin.media_id==media._id && -->
            <div ng-show="setMedia[$index]">
                <img ng-src="http://placehold.it/{{images}}" width="200px">
                <div>
                    <a class="btn btn-success " style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="removeMediaForCurrentPin(media)"><i class="fa fa-picture-o"></i> Remove Picture</a>
                </div>
            </div>
        </div>
    </div>
</div>

4

1 回答 1

2

我更正了您的 Plunker，请查看新示例。

HTML：

  <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>
    </div>
  </body>

Javascript：

var newapp = angular.module('angularApp', []);

newapp.controller('myController',function($scope){
  $scope.pinMedia=[
    {Name:'130x130'},
    {Name:'150x150'},
    {Name:'170x170'},
    {Name:'180x180'},
    {Name:'190x190'},
    {Name:'200x200'},
    {Name:'210x210'}
    ];

  $scope.selected=[];

  FromOne2Another = function(source, target, item){
    target.push(item);
    source.splice(source.indexOf(item),1);
  }

  $scope.toselected = function(item){
    FromOne2Another($scope.pinMedia, $scope.selected, item);
  }

  $scope.tosource = function(item){
    FromOne2Another($scope.selected, $scope.pinMedia, item);
  }


  $scope.limit=function(){
    return 5==$scope.selected.length;
  }  
});
于 2016-01-20T06:30:59.483 回答