[英]ng-hide and ng-show for current row
I have one table.In than am doing row hide and show using angular for edit and save purpose. 我有一张桌子,比起使用角度进行行隐藏和显示来进行编辑和保存。 It's working fine. 一切正常。
$scope.init=function(){
$scope.editable=true;
}
Now when I click on edit button in table row ,edit button will be hided and save button will be shown. 现在,当我单击表格行中的编辑按钮时,编辑按钮将被隐藏,并且将显示保存按钮。
$scope.editRow = function(id){
console.log(id);\\row id will be displayed here
$scope.editable=false;
}
Here am facing one problem ,if I click edit on second row ,only second row should be editable. 这里面临一个问题,如果我单击第二行上的“编辑”,则仅第二行应可编辑。
I know we can do this easily using row id in jquery.But here I don't know how to do this in angular for ng-hide
and ng-show
. 我知道我们可以使用jquery中的行ID轻松地做到这一点,但是在这里我不知道如何在ng-hide
和ng-show
中用angular做到这一点。
Any Help?Thanks!! 有帮助吗?谢谢!!
code: 码:
<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;
}
In order to make each row editable, you can pass the row object inside the function and make editable true as follows, 为了使每一行都是可编辑的,您可以在函数内部传递行对象,并使editable变为true,如下所示:
$scope.editRow = function(rowobject){
rowobject.editable=true;
}
code: 码:
<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;
}
In order to achieve that you need show/hide properties for each row. 为了实现这一点,您需要为每行显示/隐藏属性。 You can initialise a property in ng-init and use it to show/hide rows. 您可以在ng-init中初始化属性,并将其用于显示/隐藏行。 You can also do all of the show/hide logic in your html with the below code. 您还可以使用以下代码在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.