現在の行のng-hideとng-show

Question

私は1つのテーブルを持っています。行を非表示にし、編集と保存のために角度を使って表示しています。 正常です。私はテーブルの行の[編集]ボタンをクリックしたとき

$scope.init=function(){ 
    $scope.editable=true; 
} 

さて、編集ボタンを隠してして保存されるボタンが表示されます。ここで

$scope.editRow = function(id){ 
    console.log(id);\\row id will be displayed here 
    $scope.editable=false; 
} 

私は2行目の[編集]をクリックした場合、唯一の二行は編集可能である必要があり、1つの問題に直面しています。
私はこれを簡単にjquery.Butの行IDを使用して行うことができることを知っていますここで私はng-hideとng-showの角でこれを行う方法がわかりません。

ヘルプがありますか？ありがとうございます

コード：

<table> 
<thead> 
<tr>         
    <th>Qualification</th> 
    <th>Course</th> 
    <th>Grade Attained</th>         
    <th>Action</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="detail in educationDetails"> 
    <td> 
     <span ng-show="editable">{{detail.qualification}}</span> 
     <input type="text" ng-model="detail.qualification" ng-hide="editable"/> 
    </td> 
    <td> 
     <span ng-show="editable">{{detail.education_type}}</span> 
     <input type="text" ng-model="detail.education_type" ng-hide="editable"/> 
    </td> 
    <td> 
     <span ng-show="editable">{{detail.grade}}</span>   
     <input type="text" ng-model="detail.grade" ng-hide="editable"/> 
    </td> 
    <td>  
     <div ng-show="editable"> 
      <span><i class='fa fa-trash-o' ng-click="deleteEducationDetail(detail)"></i></span> 
      <span><i class='fa fa-pencil' ng-click="editEducationDetail(detail)"></i></span> 
     </div> 
     <div ng-hide="editable"> 
      <span><i class='fa fa-floppy-o' ng-click="updateEducationDetail(detail)"></i></span> 
      <span><i class='fa fa-times' ng-click="cancelEducationDetail(detail)"></i></span> 
     </div> 
    </td> 
</tr> 

</tbody> 
</table> 





$scope.init = function() { 
$scope.editable = true; 
} 
$scope.editEducationDetail = function (detail) { 
detail.editable = false; 
} 

Answer 1

各行を編集可能にするために、あなたは、関数内の行オブジェクトを渡して、次のように編集可能真することができ、

$scope.editRow = function(rowobject){ 
    rowobject.editable=true; 
} 

コード：

<table> 
<thead> 
<tr>         
    <th>Qualification</th> 
    <th>Course</th> 
    <th>Grade Attained</th>         
    <th>Action</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="detail in educationDetails"> 
    <td> 
     <span ng-show="editable">{{detail.qualification}}</span> 
     <input type="text" ng-model="detail.qualification" ng-hide="editable"/> 
    </td> 
    <td> 
     <span ng-show="editable">{{detail.education_type}}</span> 
     <input type="text" ng-model="detail.education_type" ng-hide="editable"/> 
    </td> 
    <td> 
     <span ng-show="editable">{{detail.grade}}</span>   
     <input type="text" ng-model="detail.grade" ng-hide="editable"/> 
    </td> 
    <td>  
     <div ng-show="editable"> 
      <span><i class='fa fa-trash-o' ng-click="deleteEducationDetail(detail)"></i></span> 
      <span><i class='fa fa-pencil' ng-click="editEducationDetail(detail)"></i></span> 
     </div> 
     <div ng-hide="editable"> 
      <span><i class='fa fa-floppy-o' ng-click="updateEducationDetail(detail)"></i></span> 
      <span><i class='fa fa-times' ng-click="cancelEducationDetail(detail)"></i></span> 
     </div> 
    </td> 
</tr> 

</tbody> 
</table> 





$scope.init = function() { 
$scope.editable = true; 
} 
$scope.editEducationDetail = function (detail) { 
detail.editable = false; 
} 

Answer 2

これを実現するには、各行に表示/非表示のプロパティが必要です。 ng-initでプロパティを初期化し、行を表示/非表示にすることができます。以下のコードを使用して、HTMLのshow/hideロジックをすべて実行することもできます。

<tr ng-repeat="detail in educationDetails" ng-init="detail.editable = false"> 
    <td> 
     <span ng-show="!detail.editable">{{detail.qualification}}</span> 
     <input type="text" ng-model="detail.qualification" ng-show="detail.editable" /> 
    </td> 
    <td> 
     <span ng-show="!detail.editable">{{detail.education_type}}</span> 
     <input type="text" ng-model="detail.education_type" ng-show="detail.editable" /> 
    </td> 
    <td> 
     <span ng-show="!detail.editable">{{detail.grade}}</span> 
     <input type="text" ng-model="detail.grade" ng-show="detail.editable" /> 
    </td> 
    <td> 
     <div ng-show="editable"> 
      <span><i class='fa fa-trash-o' ng-click="deleteEducationDetail(detail)"></i></span> 
      <span><i class='fa fa-pencil' ng-click="detail.editable = true"></i></span> 
     </div> 
     <div ng-hide="editable"> 
      <span><i class='fa fa-floppy-o' ng-click="updateEducationDetail(detail)"></i></span> 
      <span><i class='fa fa-times' ng-click="detail.editable = false"></i></span> 
     </div> 
    </td> 
</tr>