无法使用Angular.js隐藏表格行的按钮

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

本文关键字：表格 按钮 隐藏 js Angular      更新时间：2023-09-26

在使用 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>

我的控制器端代码如下。

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

在这里，我的问题是当用户单击Send所有行的edit and delete按钮都消失了。我需要当用户单击send按钮时，相应行的edit and delete按钮应该消失。请帮助我。

现有代码需要一些修改，因为编辑和删除的键是相同的，因此它会清除整个代码。请参考以下代码：

.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

在

实例化$scope.ListOfGeneratedCode后添加此项。

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

附加/更改现有方法：

$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;
        }
    });
}
相关文章：