使用 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使用 ng-repeat 和 ng-show 以及 ng-hide 和 ng-click 根据索引隐藏和显示图像
【发布时间】：2016-01-20 04:32:26
【问题描述】：

我有 2 列，第一列是未选择的图像和名为 选择图片 的按钮，第二列是选定的图像和名为 删除图片 的按钮。如果我单击左栏中的一张图像的选择图片按钮，它应该移动到右侧栏中，并且应该在左侧栏中消失。
反之亦然删除图片。如果我单击右侧的删除图片，它应该会在右侧消失并出现在左侧。我应该能够选择并删除多张图片。我用过角度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>

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-ng-click ng-hide angularjs-ng-show

【解决方案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;
  }  
});

【讨论】：

伟大的工作。但是在那个 plunker 中，图像是硬编码的，并且您对所有图像都使用了 selected as false 。但我需要使用来自 api 的图像。已上传。所以我如何将选择设置为 false。有什么方法可以将selected设置为false
而且我应该只能从左侧栏中选择 5 张图片。
好的，你想要的我都做了。我创建了自定义过滤器 - Myfilter（现在不必将 selected 字段设置为 false）并通过 limit 函数和 ng-disabled 指令添加了最多 5 个选定项目，我也替换了 <a></a> <button></button>
好的，我更新了链接并根据需要添加了第二个数组。
如果我理解你，example 会有所帮助。