一旦用户单击提交，如何从表中删除行/永久禁用提交按钮
[英]How to remove row from table / disable the submit button permanently once user clicked on submit
问题描述
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.items = [ {name: 'xxx', amount: 13, years: 2, interest: 2}, {name: 'yyy', amount: 23, years: 1, interest: 3}, {name: 'zzz', amount: 123, years: 4, interest: 4} ]; $scope.sub = function() { } });
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app="myApp"> <table ng-controller="myCtrl" border="1"> <tbody> <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td><input type=text ng-value="item.years" ng-model="first"></td> <td><input type=text ng-value="item.amount" ng-model="amount"></td> <td><input type=submit ng-click="sub()"></td> </tr> </tbody> </table> </body> </html>
I above snippet what happening is when user clicks on submit button, data gets store in db and returns with updated. 
上面的代码片段中，当用户单击“提交”按钮时，发生了什么情况，数据存储在db中并返回更新。 So what I want is once I received updated that particular click row should be removed or that button should become PERMANENTLY disabled irrespective of refresh. 因此，我想要的是，一旦收到更新，就应该删除特定的点击行，或者无论刷新如何都应永久禁用该按钮。
I try to implement it disabled but once it received updated it making all the button disabled. 我尝试将其禁用，但是一旦收到更新，就会禁用所有按钮。
please Help me for this 请帮我
2 个解决方案
解决方案1
1 2017-02-25 12:25:37
Not sure if you need an async solution: 不确定是否需要异步解决方案：
use private ($$) properties for ng-disabled 使用私有（$$）属性禁用ng
JS: JS：
$scope.sub = function(item){
item.$$disabled =true;
// you need an async solution
function saveItem(item){
// use angular.toJson(item) can auto remove $$ property
}
saveItem.then(res => {
// successfully saved
}).catch(err => {
item.$$disabled =false
})
}
HTML: HTML：
<input type="submit" ng-click="sub(item)" ng-disabled="item.$$disabled">
JSfiddle: http://jsfiddle.net/rrrobin/brvx666k/ JSfiddle： http : //jsfiddle.net/rrrobin/brvx666k/
解决方案2
1 已采纳 2017-02-25 12:27:21
Delete the row or disable the button in your sub() function. 删除行或禁用sub()函数中的按钮。
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.items = [ {name: 'xxx', amount: 13, years: 2, interest: 2, disabled: false}, {name: 'yyy', amount: 23, years: 1, interest: 3,disabled: false}, {name: 'zzz', amount: 123, years: 4, interest: 4,disabled: false} ]; $scope.sub = function(name) { for(var i=0;i<$scope.items.length;i++){ if($scope.items[i].name === name){ if($scope.disableButton){ $scope.items[i].disabled = true; }else{ $scope.items.splice(i,1); } } } } });
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app="myApp"> <label>Disable button (will delete if not checked): <input type="checkbox" ng-model="disableButton"> </label><br/> <table ng-controller="myCtrl" border="1"> <tbody> <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td><input type=text ng-value="item.years" ng-model="first"></td> <td><input type=text ng-value="item.amount" ng-model="amount"></td> <td><input type=submit ng-disabled="item.disabled" ng-click="sub(item.name)"></td> </tr> </tbody> </table> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.