Question

我有一个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";
                }
            };

谢谢：）

Answer 1

当您的网页运行时，change()已经绑定ng-class而这意味着 运行。

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

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

更改（）

直接在ng-class上使用某个功能是错误的，你也可以改变它，ng-class="item.toggle ? 'btn-primary':'btn-danger'"这样做要好得多。

Bootstrap按钮更改应用于所有表行

1 个答案: