不能使用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.

在使用Angular.js单击按钮后试图隐藏按钮时，我遇到了一个问题。我正在解释下面的代码。

<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.

这里我的问题是当用户点击发送所有行的编辑和删除按钮已经消失。我需要当用户点击发送按钮时，相应行的编辑和删除按钮应该消失。请帮助我。

1 个解决方案

#1

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

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>

Add this after $scope.ListOfGeneratedCode has been instantiated.

添加这个后美元范围。ListOfGeneratedCode被实例化。

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;
        }
    });
}

#1