当前行的ng-hide和ng-show

Question

我有一张桌子，比起使用角度进行行隐藏和显示来进行编辑和保存。 一切正常。

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

现在，当我单击表格行中的编辑按钮时，编辑按钮将被隐藏，并且将显示保存按钮。

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

这里面临一个问题，如果我单击第二行上的“编辑”，则仅第二行应可编辑。
我知道我们可以使用jquery中的行ID轻松地做到这一点，但是在这里我不知道如何在ng-hide和ng-show中用angular做到这一点。

有帮助吗？谢谢!!

码：

<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

为了使每一行都是可编辑的，您可以在函数内部传递行对象，并使editable变为true，如下所示：

 $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中执行所有显示/隐藏逻辑。

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