在特定元素的循环中控制 ng-show 的状态

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">
    <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，我稍微修改了一下。如您所见，当您单击它们时，每个按钮的状态都会以独立的方式发生变化。

查看结果here。

在特定元素的循环中控制 ng-show 的状态

control state of ng-show in a loop of a particular element

angularjs

ng-show

control-state