根据索引使用 ng-repeat 和 ng-show 以及 ng-hide 和 ng-click 隐藏和显示图像

Question

我有 2 列，第一列是 Unselected 图像和旁边名为 Select 图片 的按钮，第二列是 selected 图片和名为 删除图片 的按钮。如果我单击左栏中一张图片的 Select 图片按钮，它应该移动到右侧栏并且应该在左侧栏中消失。
反之亦然删除图片。如果我单击右侧的删除图片，它应该会在右侧消失并出现在 left.I 应该能够 select 并删除多张图片。我用过 angular js。谁能帮帮我吗
傻瓜在这里 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>

Answer 1

我更正了你的 Plunker，请看新的 example。

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

根据索引使用 ng-repeat 和 ng-show 以及 ng-hide 和 ng-click 隐藏和显示图像

HIde and show images with ng-repeat and ng-show and ng-hide and ng-click based on index

angularjs

angularjs-ng-repeat

angularjs-ng-click

ng-hide

angularjs-ng-show