1

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

我有以下代码。

纽扣

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

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

4

1 回答 1

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">
    <span ng-show="e.saveState == 'save'"> {{e.label}} </span> 
    <span ng-show="e.saveState == 'loading'"> {{e.label}} 
        <i class="fa fa-spinner fa-spin"></i>
    </span>
    <span ng-show="e.saveState == 'completed'"> {{e.label}}
        <i class="fa fa-check"></i>
    </span>
</button>

JS：

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

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

根据您的 Plunker，我对其进行了一些修改。正如您所看到的，当您单击它们时，每个按钮的状态都会以独立的方式发生变化。

在这里查看结果。

于 2016-03-03T16:01:31.553 回答