Question

我正在使用ng-repeat生成一个html数据表。

表格中的每个生成的行都有一个输入字段，上面有ng-blur。

当激活ng-blur时，我发出$ http请求，成功后，它会调用我的成功回调。这一切都有效。

在成功（以及故障回调）回调中，我希望能够将输入的背景颜色更改为浅绿色几秒钟，以指示他们刚刚选中的框off更新了（或者我的故障回调中的红色）。

如何在成功（或失败）回调内部刚刚更改的元素上访问并设置适当的样式几秒钟？

我正在尝试使用ng-style，但我的问题是我无法访问从成功（或失败）回调中获取数据的$ scope。

更新

这是我的标记：

  <tr ng-repeat="psr in programStackRanks.data | filter:{ TeamProject: teamProject} | orderBy:sortPredicate">
    <td>{{psr.Id}}</td>
    <td>{{psr.Title}}</td>
    <td>{{psr.State}}</td>
    <td><input data-id="{{psr.Id}}" data-original-rank="{{psr.OriginalRank}}" type="number" min=0 value="{{psr.ProgramStackRank}}" ng-blur="updateProgramStackRank($event)" ng-style="ResultStyle"/></td>
    <td>{{psr.TeamProject}}</td>
  </tr>

Answer 1

这不一定是最漂亮的解决方案，但你可以这样做：

<强> HTML：

<input ng-blur="updateProgramStackRank($event, psr.id)" ng-style="getResultStyle(psr.id)" />

<强> JS：

$scope.styled_ids = []
$scope.getResultStyle = function(id) {
      if ($scope.styled_ids.indexOf(id) !== -1) 
          return {"background-color":"blue"}
}
$scope.updateProgramStackRank = function($event, id) {
   $http({method: 'GET', url: '/someUrl'}).
      success(function(data) {
          $scope.styled_ids.push(id);

          $timeout(function() { 
              var index = $scope.styled_ids.indexOf(id);
              if (index > -1) {
                  $scope.styled_ids.splice(index, 1);
              }
          }, 1000);
      })
}

JSFiddle ：http://jsfiddle.net/Z8pk9/

为方便起见，我在小提琴中使用了$ timeout而不是$ http，但它显示了这个概念。

Answer 2

这就是我最终做的事情（感谢戴夫因为我指向正确的方向而获得赞誉：

我更新的tr看起来像这样

  <tr ng-repeat="psr in programStackRanks.data | filter:{ TeamProject: teamProject} | orderBy:sortPredicate">
    <td>{{psr.Id}}</td>
    <td>{{psr.Title}}</td>
    <td>{{psr.State}}</td>
    <td><input data-id="{{psr.Id}}" data-original-rank="{{psr.OriginalRank}}" type="number" min=0 value="{{psr.ProgramStackRank}}" ng-blur="updateProgramStackRank($event)" ng-style="getResultStyle({{psr.Id}})"/></td>
    <td>{{psr.TeamProject}}</td>
  </tr>

注意我必须使用模板语法作为psr.Id而没有括号不工作。

以下是我的js的摘录：

updateProgramStackRank =
            function ($event) {
                var id = $event.target.attributes["data-id"].value,
                    rank = $event.target.value,
                    originalRank = $event.target.attributes["data-original-rank"].value;

                if (rank === originalRank) {
                    //  Nothing changed
                    return;
                }

                psreService.updateProgramStackRank(id, rank).then(
                    function (response) {
                        var id = parseInt(response.config.data.id);
                        successIds.push(id);

                        $timeout(function () {
                            var index = successIds.indexOf(id);
                            if (index > -1) {
                                successIds.splice(index, 1);

                                var index2 = failureIds.indexOf(id);
                                if (index2 > -1) {
                                    failureIds.splice(index, 1);
                                }
                            }
                        }, 3000);
                    },
                    function (reason) {
                        var id = parseInt(reason.config.data.id);
                        failureIds.push(id);
                    }
                );
            },
        getResultStyle =
            function (id) {
                //debugger;
                if (successIds.indexOf(id) > -1) {
                    return { "background-color": "green" };
                }
                if (failureIds.indexOf(id) > -1) {
                    return { "background-color": "red" };
                }
                return { "background-color": "white" };
            }, 
        successIds = [], 
        failureIds = [];

如果没有创建自定义指令并且只使用开箱即用（这是我想要的），我使用了一个闭包（successIds和failureIds）来维护id列表。我最初将它们附加到范围但是当我推动它时，它推动到由ng-repeat创建的子范围而不是原始项目。

我还要指出原始计划是针对$ scope.successIds和$ .scope.failureIds添加和删除ID。当$ scope数组更改时，将更新ng-style。

即使没有看到关闭的数组，它仍然有效的原因是因为每次$ digest运行它都会重新评估ng风格的表达式，并且关闭的数组在那里活着并且踢。

$ http成功和失败回归，ng-repeat和访问$ scope

2 个答案: