アイテムを選択/有効にするまでボタンのクリックを無効にするにはどうすればいいですか？

Question

テーブルのボタンを無効にしようとしています。そして任意のヘルプを選択した場合にのみ、ボタンを有効にしようとしている $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; 
} 

ある項目が選択された場合にのみ、/クリック/

ボタンのコードを有効に

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

無効ブール値を、それを有効にしますお願いします？ 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

まずplunkの仕事を作ります！

<script src="main.js"></script><script src="script.js"></script>へ：

あなたはplunkには存在しなかったファイルを参照しては、それほど変更しなければなりませんでした。

はあなたのng-disabledディレクティブを改正：

はまた、あなたのリンクボタンをng-disabled="selectedRow !== $index"を追加する必要がありました：

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

$indexとともに$scope.selectedRowが面倒を見るように私はあなたが$scope.disabled変数が必要とは思いません各編集ボタンを有効/無効にする。

防止DOMツリーをバブルアップからのイベントをクリックしてください：

あなたtrタグのng-clickはあなたが後に$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