如何禁用按鈕點擊直到選擇/激活項目？

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