单击上的angularjs添加/删除复选框和图片

Question

我正在寻找tr-click的方法。 然后删除其中的所有img标记（mov rN,rN）并在td中选择该值。

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

想要的结果图像:(表示两个被检查，一个不是）

功能：

<img src="/img/hake_svart.png" width="30" height="30">

Answer 1

这是纯粹的角度方法，您可以在vm.minions的每个对象上都有一个选定的字段，您可以在单击特定tr时切换。然后可以使用相同的选定标志来显示＆amp;在适当的条件下隐藏图像/复选框。以下是支持此

的代码

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>

然后在控制器中你应该写：

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

Answer 2

好的，我认为最好的方法是在minion对象上创建一个布尔属性。然后在(click)上创建一个<tr>事件，用于更新该属性。然后，您可以将图像的[hidden]属性绑定到该属性，并将复选框的选中状态绑定到该属性。那么，他们可以点击<tr>，它将切换布尔值，显示图像并选中复选框。

这样的事情：

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