javascript - AngularJS 单击添加/删除复选框和图片

Question

我正在寻找一种方法来执行 tr-click。然后删除其中的所有 img 标签 ( <img src="/img/hake_svart.png" width="30" height="30"> ) 并在 td 中选择该值。

否则，插入图片，然后取消选中该复选框。

想要的结果图像:(意味着检查了两个，一个没有)

功能:

<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 1

这纯粹是 Angular 方法，您可以在 vm.minions 的每个对象上都有一个选定的字段，您可以通过单击特定的 tr 来切换该字段。然后可以使用相同的选定标志在适当的条件下显示和隐藏图像/复选框。下面是支持此功能的代码

HTML 为:

 <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>

然后在 Controller 中你应该写:

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