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
.
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,
$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. You can also do all of the show/hide logic in your html with the below code.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.