我在使用 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>
我的 Controller 端代码如下。
$scope.sendVoucherCode=function(voucherCodeId){
$scope.editButton=true;
$scope.delButton=true;
}
这里我的问题是,当用户单击发送
时,所有行的编辑和删除
按钮消失了。我需要用户何时单击发送
> 按钮相应行的编辑和删除
按钮应该消失。请帮助我。
最佳答案
现有代码需要修改一下,因为编辑和删除的键是一样的,所以就清空了。请引用以下代码:
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.ListOfGenerateCode
后添加此内容。
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;
}
});
}
关于javascript - 无法使用Angular.js隐藏表格行的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35264367/