我有一张表。我正在使用 Angular 进行行隐藏和显示以进行编辑和保存目的。 运行良好。
$scope.init=function(){
$scope.editable=true;
}
现在,当我单击表格行中的编辑按钮时,编辑按钮将被隐藏并显示保存按钮。
$scope.editRow = function(id){
console.log(id);\\row id will be displayed here
$scope.editable=false;
}
这里面临一个问题,如果我单击第二行上的编辑,则只有第二行应该是可编辑的。
我知道我们可以使用jquery中的行id轻松地做到这一点。但在这里我不知道如何以 Angular 方式为 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;
}
最佳答案
为了实现这一点,您需要显示/隐藏每行的属性。您可以在 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>
关于javascript - 当前行的 ng-hide 和 ng-show,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47627185/