选择页面上的 2 个按钮答案

【问题标题】：Select 2 buttons on page选择页面上的 2 个按钮
【发布时间】：2016-04-01 22:32:09
【问题描述】：

我的页面遇到了一个非常奇怪的问题。我正在编辑交易，在页面上我可以保存更改或删除项目。当网速很慢时，用户可以选择删除按钮，然后在页面改变前按下保存按钮。这会导致某些变量无法设置并导致服务器崩溃。

这是页面，很简单。

<div class="container">
<div class="banner">Changes</div>
<div>
    <label class="item">Date</label><br>
    <input ng-model = "trans.mDate" type="datetime-local" required>
</div>
<div>
    <label class="item">What</label><br>
    <input ng-model = "trans.mDescr" type="text" required>
</div>
<div style="border-bottom: 2px solid rgba(105,240,174,.5);margin-bottom: 20px;width: 90%;">
   <input ng-model="trans.m_type" id="Credit" value="Credit" type="radio" style="background:#00E676;width:5%;"/>
   <label for="Credit" style="color: #00E676;width:25%">Credit</label>
   <input ng-model="trans.m_type" id="Debit" value="Debit" type="radio" style="background:#FF1744;width:5%;"/>
   <label for="Debit" style="color: #00E676;">Debit</label>
</div>
<div>
    <label class="item">How Much</label><br>
    <input ng-model = "trans.mAmt" type="number" required>
</div>
<button type="button" class="third-btn" ng-click="save(trans)">Save</button>
<button type="button" class="third-btn third-delete-btn" ng-click="delete(trans)">Delete</button>
<button type="button" class="third-btn third-cancel-btn" ng-click="cancel()">Cancel</button>

我知道正在选择编辑按钮，因为这是它可以进入该路线的唯一方式。

Mongoose: m_trans.findOne({ _id: ObjectId("*************") }) { fields: undefined }  
Mongoose: m_trans.remove({ _id: ObjectId("*************") }) {}  
172.1.1.1 - - [30/Mar/2016:20:46:56 +0000] "DELETE /trans/**************      HTTP/1.1" 200 0 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 8_4 like Mac OS X)     AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12H143 (391228672)"
 Mongoose: m_trans.findOne({ _id: ObjectId("*************") }) {   fields: undefined }  
 Wed Mar 30 2016 20:47:06 GMT+0000 (UTC): Node server stopped.

/app/app/routes.js:786
         trans.mID = req.body.mID
               ^
TypeError: Cannot set property 'mID' of null

   app.put('/trans/:id',
  isLoggedIn,
  function (req, res){
  return models.TransModel.findById(req.params.id, function (err, trans) {
     trans.mID = req.body.mID;
     trans.mDate = req.body.mDate;
     trans.mType = req.body.mType;
     trans.mDescr = req.body.mDescr;
     trans.mAmt = req.body.mAmt;
     return trans.save(function (err) {
        if (!err) {
           console.log("updated");
        } else {
           console.log(err);
        }
        return res.send(JSON.stringify(trans));
     });
  });

});

提前致谢。

【问题讨论】：

按下按钮时禁用按钮，直到收到响应（如果是 ajax）或页面刷新
您可以使用 ng-disabled 并暂时禁用该按钮，然后在获得第一个请求的结果后重新启用
除了禁用按钮之外，您还可以考虑使用某种带有微调器的等待对话框，告诉用户应用程序正在处理请求

标签： javascript angularjs node.js cordova

【解决方案1】：

您应该在请求任何操作时禁用所有其他按钮，并且在请求响应后您应该再次启用所有按钮。您还可以在发出请求时显示忙碌图标，直到得到任何响应。

您可以简单地使用ng-disable 和一个标志来设置request made 或request complete。

例如：

HTML：

<button class="btn btn-primary" ng-disabled="request" ng-click="save()" >Save</button>
<button class="btn btn-danger" ng-disabled="request" ng-click="delete()" >Delete</button>
<button class="btn btn-default" ng-disabled="request" ng-click="cancel()" >Cancel</button>

在控制器中：

$scope.request = false; // initially set request false

   $scope.save = function() {
     $scope.request = true; // set true when clicked on save button

     $timeout(function() {
       $scope.request = false;  // after request complete set false again
     },1000); // wait 1 second after made request. 

   };

见PLUNKER DEMO

【讨论】：