subhra February 2016

Can not hide the button of table row using Angular.js

I am getting one issue while trying to hide button after a button click using Angular.js.I am explaining my code below.

<tbody id="detailsstockid">
    <tr ng-repeat="code in ListOfGeneratedCode">
        <td>{{$index+1}}</td>
        <td>{{code.name}}</td>
        <td>{{code.no_of_voucher}}</td>
        <td>{{code.expired_date}}</td>
        <td>{{code.voucher_amount}}</td>
        <td>
            <input type='button' class='btn btn-xs btn-green' value='View' ng-click="viewVoucherCodeData(code.voucher_code_id);">
        </td>
        <td><img ng-src="upload/{{code.image}}" name="pro" border="0" style="width:50px; height:50px; border:#808080 1px solid;" /></td>
        <td>
            <input type='button' class='btn btn-xs btn-green' value='Send' ng-click="sendVoucherCode(code.voucher_code_id);">
        </td>
        <td ng-hide="editButton">
            <a ui-sref="code">
                <input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editVoucherCodeData(code.voucher_code_id);">
            </a>
        </td>
        <td ng-hide="delButton">
            <a ui-sref="code">
                <input type='button' class='btn btn-xs btn-red' value='Remove' ng-click="deleteVoucherCodeData(code.voucher_code_id);">
            </a>
        </td>
    </tr>
</tbody>

My controller side code is given below.

$scope.sendVoucherCode=function(voucherCodeId){
        $scope.editButton=true;
        $scope.delButton=true;
}

Here my problem is when user is clicking on Send all row's edit and delete button has disappearing.I need when user will click on send button the respective row's edit and delete button should disappear.Please help me.

Answers


Shashank February 2016

The existing code needs some modification as the key for edit and delete is same, so it clears the whole. Please refer the code below:

HTML

<tbody id="detailsstockid">
    <tr ng-repeat="code in ListOfGeneratedCode">
        <td>{{$index+1}}</td>
        <td>{{code.name}}</td>
        <td>{{code.no_of_voucher}}</td>
        <td>{{code.expired_date}}</td>
        <td>{{code.voucher_amount}}</td>
        <td><input type='button' class='btn btn-xs btn-green' value='View' ng-click="viewVoucherCodeData(code.voucher_code_id);"></td>
        <td><img ng-src="upload/{{code.image}}" name="pro" border="0" style="width:50px; height:50px; border:#808080 1px solid;" /></td>
        <td>
            <input type='button' class='btn btn-xs btn-green' value='Send' ng-click="sendVoucherCode(code.voucher_code_id);">
        </td>
        <td ng-hide="code.editButton">
            <a ui-sref="code">
                <input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editVoucherCodeData(code.voucher_code_id);">
            </a>
        </td>
        <td ng-hide="code.delButton">
            <a ui-sref="code">
                <input type='button' class='btn btn-xs btn-red' value='Remove' ng-click="deleteVoucherCodeData(code.voucher_code_id);">
            </a>
        </td>
    </tr>
</tbody>

JS

Add this after $scope.ListOfGeneratedCode has been instantiated.

angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
    value.push('editButton', false);
    value.push('delButton', false);
});

Append/change the existing methods with:

$scope.sendVoucherCode = function (id) {
    angular.forEach($scope.ListOfGeneratedCo 

Post Status

Asked in February 2016
Viewed 1,071 times
Voted 7
Answered 1 times

Search




Leave an answer