Javascript AngularJS-UI更新不好

我有一个AngularJS应用程序。我的控制器如下所示：

myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.items = [];

  // ProfileUpdate: 0=Not Checked, 1=Checked, 2=Failed, 3=Succeeded
  $scope.items.push({
    name: 'Chicago Fire', players: [
      { number: 1, profileUpdated:0, name: 'Bill' },
      { number: 2, profileUpdated:0, name: 'John' }
    ]
  });

  $scope.items.push({
    name: 'Philadelphia Ice', players: [
      { number: 3, profileUpdated:0, name: 'Phil' },
      { number: 4, profileUpdated:0, name: 'Flo' }
    ]
  });

  ...

  $scope.currentTeamIndex = 0;
  $scope.currentPlayerIndex = 0;
  $scope.execute = function() {
        $http.get(playerRelatedUrl)
          .then(
            function(res) {
              $scope.items[$scope.currentTeamIndex].players[$scope.currentPlayerIndex].profileUpdated = 3;
            },
            function(err) {
$scope.items[$scope.currentTeamIndex].players[$scope.currentPlayerIndex].profileUpdated = 2;
            }
          )
  }
}]);

我的目的是迭代每个团队，并尝试更新球员档案。我想反映UI中正在发生的事情。为了做到这一点，我认为：

<button ng-click="execute()">Execute</button>
<div ng-repeat="team in items">
  <h2>{{team.name}}</h2>
  <div ng-repeat="player in team.players">
    <ul class="list-inline">
      <li>
        <div ng-switch="player.profileUpdated">
          <h3 ng-switch-when="0">Not checked yet</h3>
          <h3 ng-switch-when="1">Checking...</h3>
          <h3 ng-switch-when="2">Unable to update</h3>
          <h3 ng-switch-when="3">Updated!</h3>
        </div>
      </li>
      <li>{{player.name}}</li>
    </ul>
  </div>
</div>

执行
{{team.name}


还没有检查
检查。。。
无法更新
更新！

{{player.name}

此代码最初正确呈现。但是，单击“执行”按钮时，“检查…”和“更新”都会出现。一两秒钟后，“检查…”这个词就消失了。经过一些调查，我得知我的web服务调用在大约90毫秒内执行。这就解释了为什么“更新”一词出现得如此之快。然而，这并不能解释为什么“检查…”这个词要花这么长时间才能消失

有人能给我解释一下我做错了什么吗

---

谢谢

AngularJS$http服务返回一个“承诺”，这意味着它会立即为返回值返回一种占位符，但该占位符最终将被实际返回值填充。也就是说，当web服务响应时。即使您的web服务调用在90毫秒内执行，也不一定意味着承诺已经收到了真正的价值。我想这取决于你是如何测量的，但这可能是你所经历的“延迟”背后的机制。请参阅以供参考。

有时您必须绕过框架的限制。在这种情况下，实际上有一个可能更简单的解决方案

在JavaScript中，为什么不将状态设置为字符串而不是整数

$scope.execute = function() {
    $http.get(playerRelatedUrl)
      .then(
        function(res) {
                                                              // NOTICE THE STATUS IS A STRING HERE vvvvvvvvv
            $scope.items[$scope.currentTeamIndex].players[$scope.currentPlayerIndex].profileStatus= "Updated";
        },
        function(err) {
            $scope.items[$scope.currentTeamIndex].players[$scope.currentPlayerIndex].profileStatus = "Unable to update";
        }
      )
}

然后完全消除HTML中的切换。代码变得更容易阅读

<button ng-click="execute()">Execute</button>
<div ng-repeat="team in items">
  <h2>{{team.name}}</h2>
  <div ng-repeat="player in team.players">
    <ul class="list-inline">
      <li>
        <div>
          <h3>{{player.profileStatus}}</h3>
        </div>
      </li>
      <li>{{player.name}}</li>
    </ul>
  </div>
</div>

---

他的

ng开关

得到更新（这发生在

然后

中，因此我假设承诺已经解决）。实际上，我也遇到了同样的问题（使用ng if，而不是ng开关）——一个看似相互竞争的条件显示在一起几秒钟。您介意显示设置“profile updated=1”的代码吗？这可能与这种逻辑有关。（如果我在当前帖子中没有看到，我很抱歉）。干杯。魔鬼很可能在这里的细节，我们正在处理什么类型的数据？100队，1000队？每个队有多少名球员。100多支球队，每支球队20名球员，一次ng的重复将被消化数千次。众所周知，ngRepeat是一个令人难以置信的性能瓶颈。如果您的作用域上有任何watch语句，它们将被绑定和解除绑定到数据，并且运行js的次数可能与ng repeat导致作用域digestcall$scope.$apply（）的次数相同；设置player.ProfileUpdated后，您能告诉我为什么使用整数不合适吗？在这种情况下，框架的局限性是什么？我尝试了一个简单的演示（使用integer和promises），看起来效果不错@我不想说一个是合适的还是不合适的。有时，我们程序员会让事情变得比他们需要的更复杂。我们都这么做。当然，在堆栈溢出发布中，很难知道所有OP的实际约束，因此可能有一个很好的理由使用整型状态值。或者可能没有。我提到的限制是开关没有按照OP预期的方式更新。我的代码是解决问题的一种方法。你的看起来也很好。为什么不把它贴出来作为答案呢？

function updatePlayerStatus( newValue ) {
    var statusUpdateStrings = [ "Not checking", "Checking", ... etc. ];
    var player = $scope.items[$scope.currentTeamIndex].players[$scope.currentPlayerIndex];
    player.profileUpdated = newValue;
    player.profileStatus= statusUpdateStrings[ player.profileUpdated ];
}

$scope.execute = function() {
    $http.get(playerRelatedUrl)
      .then(
        function(res) {
            updatePlayerStatus(3);
        },
        function(err) {
            updatePlayerStatus(2);
        }
      )
}