Question

尝试禁用表格中的按钮。并且仅在选择/单击/激活项目时启用它

按钮代码

<td><a class="btn btn-info" ng-disabled="isDisabled">Edit</a></td>

禁用bool $scope.isDisabled = false;

仅在选择为真时尝试启用按钮

$scope.selectedRow = false; // initialize our variable to null
$scope.setClickedRow = function(index) { //function that sets the value of selectedRow to current index
    $scope.selectedRow = index;
    $scope.isDisabled = true;
}

有什么帮助吗？ http://plnkr.co/edit/llmcbXCA93kuTVTzpQlm?p=catalogue

完整的表格

<thead>
                <tr>
                    <th class="hidden-xs">ID</th>
                    <th>Name</th>
                    <th>Date</th>
                    <th>Grade</th>
                    <th>Subject</th>
                    <th></th>
                </tr> 
              </thead>
              <tbody>
                      <tr ng-repeat="trainee in trainees | filter: search" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
                        <td class="hidden-xs">{{$index+1}}</td>
                        <td>{{trainee.name}}</td>
                        <td>{{trainee.date | date:'d/M/yyyy'}}</td>
                        <td>{{trainee.grade}}</td>
                        <td>{{trainee.subject}}</td>
                        <td><a class="btn btn-info">Edit</a></td>
                      </tr>
                    </tbody>
            </table>

Answer 1

首先让插件工作！

您正在引用一个在插件中不存在的文件，因此必须更改：

<script src="main.js"></script>至<script src="script.js"></script>。

修改您的ng-disabled指令：

还必须在链接按钮上添加ng-disabled="selectedRow !== $index"：

<td><a class="btn btn-info" ng-disabled="selectedRow !== $index">Edit</a></td>

我认为您不需要$scope.disabled变量，因为$scope.selectedRow和$index负责启用/停用每个修改按钮。

阻止点击事件冒泡DOM树：

ng-click标记上的tr将由您在编辑链接按钮上的任何ng-click触发，以确定您必须在任何$event.stopPropagation();之后添加<a class="btn btn-info" ng-disabled="selectedRow === $index" ng-click="onEditButtonClicked(); $event.stopPropagation();"> Edit </a>你放在那里的功能：

<div class="form-inline">
    <input class="form-control" type="text" placeholder="Search" ng-model="search">
    <a type="button" href="#add-form" class="btn btn-info" ng-click="addForm()">Add new trainee</a>
    <button class="btn btn-danger" ng-click="removeTrainee(trainee)">Remove</button>
</div>

修复无效的HTML标记：

将以下内容移出桌面：

styles.css

未找到Styles.css 404：

最后但并非最不重要<link rel="stylesheet" href="styles.css">不存在并且找不到404，因此可以删除以下内容：x <- as.numeric("3411190080123000215") is.integer(x)

Working Plunk

如何禁用按钮单击直到选择/激活项目？

1 个答案: