angularjs on click add / remove checkbox and picture

Question

Im looking for a way to do on the tr-click. then remove all the img tags within them (<img src="/img/hake_svart.png" width="30" height="30">) and select that value within the td.

elsewise, insert the picture, and un-check the checkbox.

wanted result image: (means two is checked, one is not)

function:

<tr ng-repeat="minion in vm.minions" class="drep_bot_row">

    <td width="40" ng-init="vm.totalprice = vm.totalprice + minion.attack">
        <img src="/img/hake_svart.png" width="30" height="30">
<input type="checkbox" class="ng-hide" ng-model="multiplecheckbox" value="{{ minion.value }} ">
    </td>
</tr>

So you want to render the image in the row, then if they click on the checkbox, hide the image? — Dave V
– Dave V, Commented Sep 1, 2016 at 15:49
almost. only show the image when its checked. triggered by the tr — maria
– maria, Commented Sep 1, 2016 at 16:01

Ashwani · Accepted Answer · 2016-09-01 17:29:11Z

1

This is purely Angular Approach, in which you can have a selected field on every object of vm.minions, which you can toggle on click of a particular tr. Same selected flag can then be used to show & hide image/checkbox on appropriate conditions. Below is the code to support this

HTML would be:

 <tr ng-repeat="minion in vm.minions" class="drep_bot_row" ng-click="selectedCurrentMinion(minion)">

<td width="40" ng-init="vm.totalprice = vm.totalprice + minion.attack">
    <img src="/img/hake_svart.png" width="30" height="30" ng-show="minion.selected">
<input type="checkbox" class="ng-hide" ng-model="multiplecheckbox" value="{{  minion.value }} " ng-show="!minion.selected">
</td>
</tr>

Then in the controller you should write:

angular.forEach($scope.vm.minions,function(eachObj){
  eachObj.selected = false;
});
$scope.selectedArr = [];
$scope.selectedCurrentMinion = function(minion){
  minion.selected = !minion.selected;
  if(minion.selected)
  {
     $scope.selectedArr.push(minion);
  }
  else{
     $scope.selectedArr.splice($scope.selectedArr.indexOf(minion),1);
  }
}

edited Sep 1, 2016 at 17:29

answered Sep 1, 2016 at 16:41

Ashwani

2682 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

maria Over a year ago

so when the image is shown, its checked? how do i get all the multiplecheckbox values to display?

Ashwani Over a year ago

This solution shows checkboxes on every row. When you click on any roq, that particular row's checkbox gets changed to image.

Ashwani Over a year ago

Now coming to your question: Multiple chechboxes. The same solution above will work for multiple checkboxes getting converted to images. Whichever tr has been clicked. You can try this. If this is what you want.

maria Over a year ago

i think so. its supposed to select the checkbox and show the image when selected, default not selected of course. Then i also need a way to get all the results from multiplecheckbox, witch one is selected.

Ashwani Over a year ago

I have modified the selectedCurrentMinion function to keep track of selectedArr. This would help i guess. Any thing extra you want, could be performed in that same function.

|

Dave V · Accepted Answer · 2016-09-01 16:10:00Z

0

OK, I think the best way to go at this would be to create a boolean property on minion object. Then create a (click) event on the <tr> that will update that property. Then you can bind the [hidden] property of the image to that, and the checkbox's checked state to it as well. So then, they can click the <tr> and it will toggle the boolean, showing the image and checking the checkbox.

Something like this:

<tr ng-repeat="minion in vm.minions" class="drep_bot_row" (click)="toggleImage(minion)">
    <td width="40" ng-init="vm.totalprice = vm.totalprice + minion.attack">
        <img src="/img/hake_svart.png" width="30" height="30" [hidden]="minion.showImage">
        <input type="checkbox" class="ng-hide" ng-model="minion.showImage" value="{{ minion.value }} ">
    </td>
</tr>

answered Sep 1, 2016 at 16:10

Dave V

1,97610 silver badges18 bronze badges

1 Comment

maria Over a year ago

good approatch, but i dont know how i would (with angular) update the property. but you are into something

Collectives™ on Stack Overflow

angularjs on click add / remove checkbox and picture

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related