CODEWITHSUNDEEP
javascriptangularjs
maria
maria

Reputation: 159

angularjs on click add / remove checkbox and picture

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)

enter image description here

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>

Upvotes: 0

Views: 261

Answers (2)

Ashwani
Ashwani

Reputation: 268

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

Upvotes: 1

Dave V
Dave V

Reputation: 1976

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>

Upvotes: 0

Related Questions