Question

我有一个基本的html表，我需要在创建表时最初突出显示所有行。此外，如果用户点击该行，则会突出显示并再次点击突出显示。

我点击一行，然后突出显示。如果再次单击它会突出显示。我只需要最初通过ng-repeat突出显示所有行。它还需要在再次单击该行时释放突出显示，然后突出显示。 userData只是每行的一行文本

HTML

<table class="superusertable" cellpadding="5" cellspacing="0">
  <tbody class="table-font">
  <tr ng-init="" ng-repeat="source in userData" 
                 ng-model="source.fromSourceID" 
                 ng-class="{'sourcesSelected': source.sourcesSelected}" 
                 ng-click="select(source)">
  <td width="290px">
 <div class="action-checkbox"; width="290px">{{source.fromSourceID}}
</div>
</td>
</tr>
</tbody>
</table>

角

 $scope.select = function(item) {
    item.sourcesSelected ? item.sourcesSelected = false : item.sourcesSelected = true;
};

Answer 1

您只需在tr上的ng-init属性中添加一个函数即可。只需传入您的项目并将其设置为true即可。然后就像Aluan在评论中所说，你可以通过ng-click使item.sourcesSelected = !item.sourcesSelected函数更简单。

HTML

<table class="superusertable" cellpadding="5" cellspacing="0">
    <tbody class="table-font">
        <tr ng-init="init(source)" 
            ng-repeat="source in userData" 
            ng-model="source.fromSourceID" 
            ng-class="{'sourcesSelected': source.sourcesSelected}" 
            ng-click="select(source)">
            <td width="290px">
                <div class="action-checkbox"; width="290px">{{source.fromSourceID}}</div>
            </td>
        </tr>
    </tbody>
</table>

角

$scope.select = function(item) {
    item.sourcesSelected = !item.sourcesSelected;
};

$scope.init = function(item) {
    item.sourcesSelected = true;
}

另外，在您检索数据时，可以通过设置ng-init来完全取消init和item.sourcesSelected = true功能。

Answer 2

我可以观察到太多错误。

ng-init =“”不需要
三元运算符错误你应该做以下事情：

item.sourcesSelected = item.sourcesSelected？ false：true;

ng-repeat突出显示所有行，但也取消选择，选择

2 个答案: