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

Question

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>

Slava Utesinov · Accepted Answer · 2016-01-21T06:36:44.060

2

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

edited Jan 21 '16 at 06:36

answered Jan 20 '16 at 06:30

Slava Utesinov

13,410
2
19
26

Great work. but in that plunker,the images were hardcoded and you have used selected as false for all the images. but i need to use the images from the api. which were uploaded.so how can i set selected as false. is there any way to set selected as false – Thilak Raj Jan 20 '16 at 10:00
And also i should be able to select only 5 image from the left side column. – Thilak Raj Jan 20 '16 at 10:08
1

Ok, I made all you wanted. I created custom filter - `Myfilter` (now it is not nessesary to set `selected` field to false) and added limit up to 5 selected items by means of `limit` function and `ng-disabled` directive, also I replased `` by `` – Slava Utesinov Jan 20 '16 at 11:43
sorry, The plunker has not been updated. can you put the updated link here. And also i want one more thing to learn from here, can you help. i.e there will be two arrays. if i click set picture at left, it should move to second array, which should be displayed. How to do with two arrays. Thanks in advance. please help me – Thilak Raj Jan 21 '16 at 04:06
1

Ok, I updated link and added second array as you wanted. – Slava Utesinov Jan 21 '16 at 06:40
Thank you so much. Nice usage of variable and function name. and good work – Thilak Raj Jan 21 '16 at 07:28
If you don't mind, one more doubt i have . this is the updated plunker. https://plnkr.co/edit/Gp47FUzKgGVl3Sxd98NS?p=preview How to send the put request to the backend, by using the selected images at right. there is an array in backend called other_media. i need to send the ids to that array. please have a look at plunker there is one submit button. after clicking submit button it should send the put request for only ids – Thilak Raj Jan 21 '16 at 08:13
1

If I understood you this [example](https://plnkr.co/edit/RJhRVWFw3ZUMvu7jSiA1?p=preview) will help. – Slava Utesinov Jan 21 '16 at 08:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101272/discussion-between-thilak-raj-and-slava-utesinov). – Thilak Raj Jan 21 '16 at 10:18
Thank you very much for your help. One more thing, I will show the selected and put images in one page.after that images, there will be on edit button. if i click on edit, it will again redirect to the page where we select the picures. During that time, i need to display all the selected images at the right side. how to do it, could you please help me – Thilak Raj Jan 21 '16 at 10:34
I think your additional questions already have gone beyond the initial question. I recommend you to post new separated question(s). – Slava Utesinov Jan 21 '16 at 11:50
My friend asked here, can you answer here http://stackoverflow.com/questions/34923006/change-picture-from-already-selected-pictures-in-angular-js – Thilak Raj Jan 21 '16 at 12:54

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

1 Answers1