Question

我有一定数量的行和列，我想将类（'xyz'）添加到表单元格onClick上，当我点击其他单元格时它不应该松开那个类...请帮助...

_readonly

Answer 1

如果您只想添加一个类（意味着您不想触发另一个摘要循环），我建议您使用旧的onclick="this.className += ' xyz'"，而不是ngClick ：

<table class="table-bordered select-table">
    <tr ng-repeat="row in letterArray" ng-init="rowIndex = $index">
       <td class="lettersoup" 
           onclick="this.className += ' xyz'"
           ng-id="{{$parent.$index+''+$index}}" 
           ng-repeat="column in row  track by $index" 
           ng-mouseup="removeFlag()" ng-mousedown="setFlag($parent.$index,$index);" 
           ng-mousemove="drawImage($parent.$index,$index)">{{column}}</td>
    </tr>
</table>

Answer 2

您可以使用对象并将位置存储为键。此外，我不确定您是否希望点击是切换或只是希望它始终将类添加到单元格。如果最后一个行为是您想要的，那么这段代码应该可以解决问题。

<table class="table-bordered select-table" ng-init="clickedCells = {}">
    <tr ng-repeat="row in letterArray" ng-init="rowIndex = $index">
        <td class="lettersoup" ng-class="{ xyz: clickedCells[$parent.$index + ':' + $index] }" ng-mouseenter="clickedCells[$parent.$index + ':' + $index] = true" ng-id="{{$parent.$index + '' + $index}}" ng-repeat="column in row  track by $index" ng-class="" ng-mouseup="removeFlag()" ng-mousedown="setFlag($parent.$index,$index);" ng-mousemove="drawImage($parent.$index,$index)">{{column}}</td>
    </tr>
</table>

但是，您应该将ng-mouseenter的代码抽象到控制器中的函数中，并在视图中调用该函数。

Answer 3

我知道这个问题来自去年，但希望这会帮助那些人。

以下是我在选定的表行上设置“活动”类的原因。这是有效的，因为每个ng-repeat迭代都有自己的范围。我的搜索结果是一组对象。

ng-click动态地将新的“Selected”属性添加到当前结果对象。 ng-class在与当前ng-repeat迭代相同的范围内执行，因此它可以引用局部变量“result”。如果当前搜索结果的“Selected”属性为true，则ng-class切换“active”类。

<tr ng-repeat="result in SearchResults"
    ng-class="{'active': result.Selected}"
    ng-click="result.Selected = true; SearchResultSelected(result)"
    ng-cloak>
    <td>{{result.Status}}</td>
    <td>{{result.ID}}</td>
    <td>{{result.Phone}}</td>
    <td>{{result.Name}}</td>
    <td>{{result.AddressLine1}}</td>
    <td>{{result.AddressLine2}}</td>
    <td>{{result.CityName}}</td>
    <td>{{result.StateName}}</td>
    <td>{{result.ZipCode}}</td>
    <td>{{result.Environment}}</td>
</tr>

因此，如果您可以将“column”变量更改为对象，则可以利用我的方法实现此目标。

我猜你的数据结构如下：['A'，'B'，...]

我建议这样做：[{Letter：'A'}，{Letter：'B'}，...]

这样你可以这样做：

<table class="table-bordered select-table">
    <tr ng-repeat="row in letterArray" ng-init="rowIndex = $index">
       <td class="lettersoup" 
           ng-id="{{$parent.$index+''+$index}}" 
           ng-repeat="column in row  track by $index" 
           ng-class="{'xyz': column.Selected}"
           ng-click="column.Selected = true; doSomeOtherActionOrCallFunction()"
           ng-mouseup="removeFlag()" 
           ng-mousedown="setFlag($parent.$index,$index);" 
           ng-mousemove="drawImage($parent.$index,$index)">{{column.Letter}}</td>
    </tr>
</table>

将类添加到表单元格onClick angular

3 个答案: