如何類添加到具有角NG-重複特定表TR

在我的HTML我有一個表：如何類添加到具有角NG-重複特定表TR

<table> 
    <tr ng-class="vm.status" ng-repeat="item in vm.itemsList"> 
    <td>{{ item.name }}</td> 
    <td> 
     {{ item.description }} - <span ng-click="vm.disableRow()">Disable</span> 
    </td> 
    </tr> 
</table>

我試圖做到的是，當我點擊禁用，我想申請該類僅對特定tr「禁用」。

我當前的代碼將該類應用於整個表。我有其他選項，例如使用splice和$ index成功刪除tr。

我想知道是否需要實現$ index來添加類，但我想不出如何去做。

在我的控制器：

vm.disableRow = function() { 
    vm.status = 'disabled'; 
}

如果它的事項，我只需要點擊一次以應用「已禁用」類。一旦禁用，我無法更改它，因此無需打開或關閉選項。

來源

2016-02-29 odran037

我相信這一點：http://stackoverflow.com/questions/23618960/add-a-class-selectively-to-an-ng-repeat-angularjs?rq=1到成爲一個可能的解決方案或許是重複的，但我不確定我是否理解。如果使用任何過濾器，則 – odran037

我想你應該使用一個數組來保存status類。

在你的控制器：

vm.status = []; 
vm.disableRow = function(index) { 
    vm.status[index] = 'disabled'; 
}

，並在視圖：

<table> 
    <tr ng-class="vm.status[$index]" ng-repeat="item in vm.itemsList"> 
    <td>{{ item.name }}</td> 
    <td> 
     {{ item.description }} - <span ng-click="vm.disableRow($index)">Disable</span> 
    </td> 
    </tr> 
</table>

來源

2016-02-29 01:52:11 dieuhd

將崩潰。 '$ index'與過濾重複 – charlietfl

@charlietfl好點中的原始數組索引不同。我一定會牢記這一點。但在這種情況下，我不需要過濾。該項目相當簡單。 – odran037

@charlietfl：謝謝。 – dieuhd

我會保存，而不是每個項目的狀態：

<tr ng-class="item.status" ng-repeat="item in vm.itemsList"> 
     <td>{{ item.name }}</td> 
     <td> 
    {{ item.description }} -<span ng-click="vm.disableRow(item)">Disable</span> 
</tr>

而在你的控制器：

vm.disableRow = function(item) { 
    item.status = 'disabled'; 
}

來源

2016-02-29 01:55:28 ippi

Upvoted，因爲我實際上實施了這個想法以及第一個建議。出於保密原因，我無法像我正在構建的實際應用那樣細節。 – odran037

這是一個更「正確」的方式。如果是短操作，我還想在'ng-click'上使用直接分配。 'ng-click =「item.status ='disabled'」' – Icycool

其實很簡單。你不需要在controller中編寫代碼來實現這一點。因爲，您需要禁用該特定行而不切換它。請按照以下步驟操作。

<table> 
    <tr ng-repeat="item in vm.itemsList" ng-click="item.disabled = true" 
      ng-class="{ disabled: item.disabled }"> 
    <td>{{ item.name }}</td> 
    <td> 
     {{ item.description }} - <span>Click the row to Disable</span> 
    </td> 
    </tr> 
</table>

這裏是工作PLUNKER：http://plnkr.co/edit/8URPrZlM9PPruhaX2w3v?p=preview
我已經加入了紅色的CSS顏色禁用時，是想說明的變化。

來源

2016-02-29 03:15:54

var app = angular.module("app",[]); 
 

 
app.controller("ctrl" , function($scope){ 
 
    
 
    $scope.items = [ 
 
    {"name":"Ali","description":"Java"}, 
 
     {"name":"Reza","description":"C++"}, 
 
     {"name":"Amir","description":"C#"} 
 
    ]; 
 
    
 
    
 
    });

.odd{ 
 
    color:red; 
 
    } 
 

 
.even{ 
 
    color:blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<table> 
 
    <tr ng-repeat="item in items" ng-class-odd="'odd'" ng-class-even="'even'"> 
 
    <td>{{ item.name }}</td> 
 
    <td> 
 
     {{ item.description }} - <span ng-click="vm.disableRow()">Disable</span> 
 
    </td> 
 
    </tr> 
 
</table> 
 
    </div>

來源

2016-02-29 05:18:50

如何類添加到具有角NG-重複特定表TR

回答

相關問題