Question

我正在动态生成表单中的操作列表。例如，保存，批准，拒绝。当您单击其中一个操作时，我希望微调器出现在该按钮中，直到我从服务器获得成功响应。

我有以下代码。

按钮

<button type="submit" value="{{e.label}}" ng-click="getCtrlScope().formData.requestAction=e.action;" class="btn {{e.btnStyle}}"  ng-repeat="e in buttonActions">
    <span ng-show="saveState == 'save'"> {{e.label}} </span> 
    <span ng-show="saveState == 'loading'"> {{e.label}} 
        <i class="fa fa-spinner fa-spin"></i>
    </span> 
    <span ng-show="saveState == 'completed'"> {{e.label}} 
        <i class="fa fa-check"></i>
    </span>
</button>

JS

$scope.saveState = 'save' ;

$scope.save = function() {      
    $scope.saveState = 'loading'

    $http.post('../reviewRequest.json', $scope.formData).then(
        function(response) {    
            $scope.saveState = 'save'
        }, function(response) {
    });
};

您可能会看到，当您点击某个动作时，我的所有按钮都会开始旋转。如何将旋转限制为单个按钮？

Answer 1

这不是一个很好的实践，正如@fantarama所提到的，你应该在元素中使用一个属性，而不是$ scope。

无论如何，如果您不介意，可以使用ng-click call

存储您点击的元素。

ng-click="getCtrlScope(e)..."

将该元素存储在某个变量中：

function getCtrlScope(element) {
    $scope.clickedElement = element;
    ...
}

然后，在您的HTML中：

<span ng-show="saveState == 'save' && e !== clickedElement"> {{e.label}} </span> 
<span ng-show="saveState == 'loading' && e === clickedElement"> {{e.label}} 
    <i class="fa fa-spinner fa-spin"></i>
</span>
<span ng-show="saveState == 'completed' && e === clickedElement"> {{e.label}}
    <i class="fa fa-check"></i>
</span>

修改

假设您的POST调用位于getCtrlScope中，您可以执行以下操作：

如前所述，在函数调用中添加元素，并将其传递给保存函数

将状态存储在元素本身（不要忘记初始化）

更新ng-show条件

HTML：

<button type="submit" value="{{e.label}}" ng-click="getCtrlScope(e).formData.requestAction=e.action;" class="btn {{e.btnStyle}}" ng-repeat="e in buttonActions"> {{e.label}} {{e.label}} {{e.label}} </button>

JS：

$scope.save = function(element) { element.saveState = 'loading' $http.post('../reviewRequest.json', $scope.formData).then( function(response) { element.saveState = 'save' }, function(response) { }); };

基于你的Plunker，我修改了一下。如您所见，每个按钮的状态在您单击它们时会以独立的方式更改。

查看结果here。

在特定元素

1 个答案: