anglejs on clickチェックボックスと画像の追加/削除

Question

trをクリックする方法を探しています。 その中のすべてのimgタグを削除し（<img src="/img/hake_svart.png" width="30" height="30">）、td内のその値を選択します。

elsewise、画像を挿入し、チェックボックスをオフにします。

（1ではない、2がチェックされている意味）機能：

は結果画像を望んでいた

<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

これは、あなたが特定のTRのクリックで切り替えることができますvm.minionsのすべてのオブジェクトの選択したフィールドを持つことが可能な純粋な角度アプローチ、です。適切な条件で画像/チェックボックスを非表示にするには、同じ選択されたフラグを使用してください。&

<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

OK、私はこれで行くための最善の方法は、になると思いますminionオブジェクトにbooleanプロパティを作成します。次に、そのプロパティを更新する<tr>に(click)イベントを作成します。次に、イメージの[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>