Search code examples
angularjsangularjs-ng-repeatangularjs-ng-clickng-hideangularjs-ng-show

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

I have 2 columns, first column is Unselected images and button called Select picture next to it and second column is selected images and button called Remove picture. if i click Select picture button for one image at left column, it should move to right side column and it should disappear in left side column.
Viceversa for the remove picture. if i click remove picture at right, it should disappear at right and should appear at left.I should be able to select and remove multiple pictures. i have used angular js. Can anyone please help me
Plunker here 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>

Solution

  • I corrected your Plunker, please look at new 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;
  }  
});