maria maria - 3 months ago 10
Javascript Question

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>

Answer

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