ページ上の2つのボタンを選択

Question

私のページでは非常に奇妙な問題が発生しました。私は取引を編集中で、ページ上で変更を保存したりアイテムを削除したりすることができます。インターネットが非常に遅い場合、ユーザーは削除ボタンを選択し、ページが変更される前に保存ボタンを押すことができます。これにより、特定の変数が設定されず、サーバーがクラッシュします。

ここはかなり簡単なページです。

<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)); 
    }); 
    }); 

}）;

ありがとうございます。

Answer 1

操作を要求するときに他のすべてのボタンを無効にし、要求の応答後にすべてのボタンを再び有効にする必要があります。また、応答があるまでリクエストをすると、ビジーアイコンを表示することもできます。

あなたは作らrequestまたはrequest完全に設定するng-disableとフラグを使用して簡単に実現することができます。例えば

：

は

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