Question

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>

我上面的片段当用户点击提交按钮时发生的事情，数据在db中存储并返回更新。所以我想要的是，一旦我收到更新，应该删除特定的点击行，或者该按钮应该永久禁用而不管刷新。

我尝试将其禁用，但一旦收到更新，就会禁用所有按钮。

请帮帮我

Answer 1

不确定是否需要异步解决方案：
使用私有（$$）属性进行ng-disabled

<强> 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：

<input type="submit" ng-click="sub(item)" ng-disabled="item.$$disabled">

JSfiddle：http://jsfiddle.net/rrrobin/brvx666k/

Answer 2

删除行或禁用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>

如何在用户点击提交后永久删除表中的行/禁用提交按钮

2 个答案: