引导按钮更改应用于所有表行

Posted 2023-05-09

【中文标题】引导按钮更改应用于所有表行

【英文标题】：Bootstrap button changes applied to all table rows

【发布时间】：2017-12-05 00:40:09

【问题描述】：

我有一个 foreach 循环，可以将数据显示到一个表中，每个表上都有一个签入按钮。每次我点击按钮，它都会改变它们？有什么方法可以在不删除 foreach 循环的情况下阻止这种情况？

@foreach (var item in Model)
    
        <tr>
            <td>@html.DisplayFor(modelItem => item._Name)</td>
            <td>@Html.DisplayFor(modelItem => item.DateOfBirth)</td>
            <td>@Html.DisplayFor(modelItem => item.JobTitle)</td>
            <td>@Html.DisplayFor(modelItem => item.Company)</td>
            <td>@Html.DisplayFor(modelItem => item.EventId)</td>
            <td class="text-center">
                <button class="btn btn-danger btn-sm" ng-class="change()" ng-click="toggle = !toggle">toggleText</button>


                @Html.ActionLink("Edit", "EditAttendee", new id = item.Id) |
                @Html.ActionLink("Delete", "Delete", new id = item.Id)
            </td>
        </tr>
    


$scope.change = function() 
                if($scope.toggleText == "Checked-in")
                    return "btn btn-success btn-sm";
                
                else
                    return "btn btn-danger btn-sm";
                
            ;

谢谢:)

【问题讨论】：

下面的按钮是您的签到按钮吗？您是否将要更改的 rowID 传递给 change() 方法 toggleText

通过在问题中添加change() 函数来改进您的问题

您的问题的关键在于更改功能，无论它在做什么，它都适用于每个项目，@Maher 的回答可能会对您有所帮助

我已经添加了更改功能。 :) 再次感谢

【参考方案1】：

实际上change() 已经绑定到ng-class 并且这意味着它在您的页面运行时运行。

而ng-click 有一个toggle 参数，这意味着您的foreach 中的所有项目都有相同的按钮，您必须将其更改为item.toggle = !item.toggle。

item.toggle 提示具有 toggle 参数的 item，因此当您单击该按钮时，您只需更改它而不是全部。

更改（）

直接在ng-class上使用函数是错误的方式，你也可以改一下，ng-class="item.toggle ? 'btn-primary':'btn-danger'"这样好多了。

【讨论】：

感谢您的回复。我试过你的答案没有运气，它仍然改变了所有的按钮。 <button class="btn btn-danger btn-sm" ng-class="item.toggle ? 'btn-primary':'btn-danger'" ng-click="item.toggle = !item.toggle">toggleText</button>

那是因为你没有 item，实际上你在 c# 模式下使用 item 而不是 angularjs，我的问题是为什么你不尝试将模型数据作为 json 获取，它使用 angular 更灵活，使用 json 你可以使用 ng-repeat