我正在研究AngularJS项目，我使用ng-repeat来显示数据，有一个Edit按钮，可以对特定行进行编辑。在编辑按钮上点击有Save和Cancel按钮显示。在保存按钮上点击它调用$http.post来更新数据库中的数据。数据显示在gal单位并存储为liter，所以当我点击保存按钮时，它首先转换为liter，然后存储在db中。
现在的问题是，当我点击Save按钮一次它工作正常，但当我点击两次保存按钮它转换加仑->升->升，然后保存到db。
所以我想做的是，如果$http请求已经在处理中，那么不要接受另一个$http请求。
我已经尝试禁用按钮，但仍然是可点击的。
HTML:
<div class="taxi_output" ng-repeat="item in vmDosings.data track by $index" >
<div class="row">
<div class="col-lg-4 text-center one" ng-bind="item.dos_nr"></div>
<div class="col-lg-4 text-center two">
<div ng-if="item.enableContent">
<input id="{{$index}}" class="font-size input-{{$index}}" ng-class="{ 'error' : vmDosings.error.level || vmDosings.error.undef || vmDosings.error.exist }" type="text" ng-model="item.level" ng-change="itemChanges(item)" ng-disabled="!item.enableContent"/> {{::$root.getEinheiten($root.GlobalData.config.volumemessurement)}}
</div>
<div ng-if="!item.enableContent" >
<p class=""> {{ item.level + ' ' + $root.getEinheiten($root.GlobalData.config.volumemessurement)}} </p>
</div>
</div>
<div class="col-lg-4" ng-if="item.enableContent == false" style="vertical-align: middle">
<a class="btn" ng-click="enableContent(item, $index)" event-focus="click" event-focus-id="{{$index}}" tooltip-placement="bottom" tooltip="{{::$root.getLabel('edit')}}">
<i style="cursor:pointer;" class="fa fa-edit fa-2x"></i>
</a>
<a class="btn" ng-if="vmDosings.data.length > 1" ng-click="removeFromList(item, $index)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('delete')}}">
<i style="cursor:pointer;" class="fa fa-trash fa-2x"></i>
</a>
</div>
<div class="col-lg-4" ng-if="item.enableContent == true">
<a class="btn" ng-click="saveChanges(item, $index)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('save')}}">
<i style="cursor:pointer;" class="fa fa-save fa-2x"></i>
</a>
<a class="btn" ng-click="removeFromList(item, $index)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('delete')}}">
<i style="cursor:pointer;" class="fa fa-trash fa-2x"></i>
</a>
<a class="btn" ng-click="restoreChanges(item)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('reset')}}">
<i style="cursor:pointer;" class="fa fa-remove fa-2x"></i>
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div ng-if="item.enableContent && vmDosings.validate == false">
<div class="panel panel-danger" style="margin-top:5px; margin-bottom:0px;">
<div class="panel-heading" style="padding:0">
<ul style="padding: 5px 0px 5px 30px;">
<li ng-if="vmDosings.error.level" ng-bind="getLabel('only_floats_with_one_digit')"></li>
<li ng-if="vmDosings.error.undef" ng-bind="getLabel('inputs_empty_not_allowed')"></li>
<li ng-if="vmDosings.error.exist" ng-bind="getLabel('data_already_exist')"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
</div>
AngulrJS:启用编辑模式:
$scope.enableContent = function(data, $index) {
angular.forEach(vmDosings.data, function(value, key) {
vmDosings.data[key].enableContent = (value.id == data.id ? true : false );
});
$timeout(function () {
$('.input-'+ $index).focus();
$('.input-'+ $index).val($('.input-'+ $index).val());
});
}
点击保存按钮:
rootScope.GlobalData.config美元。体积测量得到单位的id
rootScope美元。Calcunits (9, id, data['level']);是转换
$scope.saveChanges = function(data) {
var id = $rootScope.GlobalData.config.volumemessurement;
data['level'] = $rootScope.calcunits(id, 9, data['level']);
checkValues(data);
var checked = true;
for (i in vmDosings.error) {
if (vmDosings.error[i]) {
checked = false;
vmDosings.validate = false;
break;
}
}
if(checked == true) {
DosingsServices.saveChanges(data).then(function (result) {
if( result.data.message == 'success' && result.data.status == 200) {
DosingsServices.getDosings($stateParams.taxi_id).then(function (result) {
//vmDosings.data = result.data.dosings
var data = result.data.dosings;
var id = $rootScope.GlobalData.config.volumemessurement;
var i = 0;
for(i = 0; i <= data.length; i++) {
angular.forEach(data[i], function(value, key){
if(key == "level")
data[i][key] = $rootScope.calcunits(9, id, value)
});
}
vmDosings.data = data;
});
}
else if( result.data.message == 'Data Already Exist') {
data['level'] = $rootScope.calcunits(9, id, data['level']);
vmDosings.error.exist = true;
vmDosings.validate = false;
}
});
}
}
你需要的是拦截器方法的$httpProvider。它让你完全控制Angular范围内的任何http调用(request、requestError、response、responseError方法)。
如果服务调用已经在进行中，您可以跳过下一个调用或将其放在队列中，一旦您从之前的调用获得响应，就可以调用任何其他您想要做的事情
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// optional method
'request': function(config) {
// do something on success
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
在post方法之前设置一个标志var inProgress = true;。在你发布之前检查一下这个标志是否设置好了。当post方法完成(finally)时，将标志设置为false。
您也可以使用此标志来启用/禁用保存按钮