HIde和显示图像与ng-repeat和ng-show和ng-hide和ng-click基于索引

我有2列，第一列是未选中的图像和按钮选择图片旁边，第二列是所选图像和按钮称为删除图片。如果我点击左图中一个图像的选择图片按钮，它应该移动到右侧列，它应该在左侧列中消失。
Viceversa删除图片。如果我点击删除图片在右侧，它应该消失在右侧，应该出现在左侧。我应该能够选择并删除多张图片。我已经使用角js。任何人都可以请帮我在这里https://plnkr.co/edit/rtJP91MtYISyVZkdFWr8?p=preview HIde和显示图像与ng-repeat和ng-show和ng-hide和ng-click基于索引

<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>

来源

2016-01-20 Thilak Raj

我纠正你的Plunker
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; 
    } 
});

来源

2016-01-20 06:30:59

伟大的工作。但是在那个笨拙的人中，图像是硬编码的，并且您已经将所选图像用作所有图像的假。但我需要使用api中的图像。哪些被上传。我如何设置选择为false。有没有什么办法可以将选中的设置为false –

而且我应该只能从左侧栏中选择5张图片。 –

好吧，我做了你想要的。我创建了自定义过滤器 - “Myfilter”（现在不需要将'selected'字段设置为false），并通过'limit'函数和'ng-disabled'指令添加了限制多达5个选定项目， '通过'' –

HIde和显示图像与ng-repeat和ng-show和ng-hide和ng-click基于索引

回答

相关问题