Angularjs ng重复不'；t在数组更改时更新其元素_Angularjs_Twitter Bootstrap

Angularjs ng重复不'；t在数组更改时更新其元素

angularjs twitter-bootstrap

Angularjs ng重复不'；t在数组更改时更新其元素,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,为什么下面的代码不使用新元素每秒更新一次列表组 index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <s

为什么下面的代码不使用新元素每秒更新一次列表组

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="MyApp" ng-controller="MyController">
    <div class="panel panel-default">
      <div class="panel-heading">ng-repeat with bootstrap list-item</div>
      <div class="panel-body">
        <div class="list-group">
          <button type="button" class="list-group-item" ng-repeat="item in data">
            {{item}}
          </button>
        </div>
      </div>
    </div>
  </body>
</html>

我错过了什么

提前感谢。

setInterval

将在角度上下文之外运行

interval

功能，这不会使角度消化循环系统运行消化循环。结果绑定将不会更新

因此，对于同一个角度，我们提供了一个名为

$interval

的服务，它在每个指定的

interval

之后启动一个摘要周期（您可以将事件转换为摘要周期）。这就是为什么使用

$interval

而不是

setInterval

//inject $interval before using it.
$interval(function() {
  console.log("setTimeout");
  $scope.data.push("five");
}, 1000);

setInterval

将在角度上下文之外运行

interval

功能，这不会使角度摘要循环系统运行摘要循环。结果绑定将不会更新

因此，对于同一个角度，我们提供了一个名为

$interval

的服务，它在每个指定的

interval

之后启动一个摘要周期（您可以将事件转换为摘要周期）。这就是为什么使用

$interval

而不是

setInterval

//inject $interval before using it.
$interval(function() {
  console.log("setTimeout");
  $scope.data.push("five");
}, 1000);

一种方法是，如果要使用setInterval

 $scope.$apply();

使用angular，您可以使用$interval

 $scope.$apply();

演示

var-app=angular.module（“MyApp”，[]）；
app.controller（“MyController”，函数（$scope）{
$scope.data=[“一”、“二”、“三”、“四”]；
setInterval（函数（）{
console.log（“setTimeout”）；
$scope.data.push（“五”）；
$scope.$apply（）；
}, 1000);
});

使用引导列表项重复ng
{{item}}
如果您想使用setInterval

 $scope.$apply();

使用angular，您可以使用$interval
 $scope.$apply();

演示

var-app=angular.module（“MyApp”，[]）；
app.controller（“MyController”，函数（$scope）{
$scope.data=[“一”、“二”、“三”、“四”]；
setInterval（函数（）{
console.log（“setTimeout”）；
$scope.data.push（“五”）；
$scope.$apply（）；
}, 1000);
});

使用引导列表项重复ng
{{item}}
实际应用程序中的问题有点不同。我不是在setInterval
方法中向数组添加新元素，而是在WebSocket.onmessage
方法中添加新元素。那么我应该怎么做才能相应地更新列表组
。@frozenhart您能详细说明一下吗？而不是执行$scope.data.push（“五”）
在setInterval
中，我在WebSocket.onmessage中做了同样的事情method@FrozenHeart因此，我建议您使用$timeout
进行同样的操作，然后您可以愉快地使用setInterval
。比如$timeout（function（）{$scope.data.push（“五”）；}）
，使用$timeout购买您将确保无论何时更新$scope
，$timeout
都会通过运行digest cycleAh来帮助您保持绑定同步，但您没有正确理解我的意思。好的，我得到了你关于设置间隔的答案，但这里只是为了演示。在实际应用程序中，我试图在WebSocket.onmessage
方法中向数组添加新元素，而不是在setInterval
回调中，并且由于某种原因，我没有得到列表组
的任何更新。实际应用程序中的问题有点不同。我不是在setInterval
方法中向数组添加新元素，而是在WebSocket.onmessage
方法中添加新元素。那么我应该怎么做才能相应地更新列表组
。@frozenhart您能详细说明一下吗？而不是执行$scope.data.push（“五”）
在setInterval
中，我在WebSocket.onmessage中做了同样的事情method@FrozenHeart因此，我建议您使用$timeout
进行同样的操作，然后您可以愉快地使用setInterval
。比如$timeout（function（）{$scope.data.push（“五”）；}）
，使用$timeout购买您将确保无论何时更新$scope
，$timeout
都会通过运行digest cycleAh来帮助您保持绑定同步，但您没有正确理解我的意思。好的，我得到了你关于设置间隔的答案，但这里只是为了演示。在实际应用程序中，我试图在WebSocket.onmessage
方法中向数组添加新元素，而不是在setInterval
回调中，并且由于某种原因，我没有得到列表组
的任何更新。实际应用程序中的问题有点不同。我不是在setInterval
方法中向数组添加新元素，而是在WebSocket.onmessage
方法中添加新元素。那么，我应该如何相应地更新列表组
？实际应用程序中的问题有点不同。我不是在setInterval
方法中向数组添加新元素，而是在WebSocket.onmessage
方法中添加新元素。然后，我应该如何相应地更新列表组
？