2

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.

2
  • Can you please show a demo to help one in better understanding? Commented Feb 8, 2016 at 7:35
  • The problem is that all rows refer to one and the same $scope.editButton/$scope.delButton. So all rows get impacted if these values get changed. You need to add a scope variable for these buttons for each row. Commented Feb 8, 2016 at 7:57

1 Answer 1

2

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.ListOfGeneratedCode, function (value, key) {
        if (value.voucher_code_id == id) {
            value.editButton = $scope.delButton = true;
        }
    });
}

$scope.editVoucherCodeData = function (id) {
    angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
        if (value.voucher_code_id == id) {
            value.editButton = true;
        }
    });
}

$scope.deleteVoucherCodeData = function (id) {
    angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
        if (value.voucher_code_id == id) {
            value.delButton = true;
        }
    });
}
Sign up to request clarification or add additional context in comments.

2 Comments

Is this $scope.delButton or value.delButton..?
sorry it should be value.delButton.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.