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

Question

试图禁用表中的按钮。并启用它，只有当选定的项目/点击/激活

按钮代码

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

禁用布尔 $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标签将您将您的编辑链接按钮，来解决你有后添加$event.stopPropagation();任何ng-click被触发你把有任何功能：

<a class="btn btn-info" 
    ng-disabled="selectedRow === $index" 
    ng-click="onEditButtonClicked(); $event.stopPropagation();"> 
Edit 
</a> 

修复无效的HTML标记：

移动的后续行动和出表的：

<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> 

Styles.css中未找到404：

最后但并非最不重要styles.css不存在，并得到一个404没有发现，等以下可以被移除：<link rel="stylesheet" href="styles.css">

Working Plunk

Answer 2

我有一个问题，由默认的行被选择，但对接不是，只有当我点击它，按钮启用，为什么呢？

enter image description here