ng-repeatは配列変更時に要素を更新しません

なぜ次のコードは新しい要素で毎秒list-groupを更新しませんか？ng-repeatは配列変更時に要素を更新しません

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>

script.js

var app= angular.module("MyApp", []); 

app.controller("MyController", function($scope) { 
    $scope.data = ["one", "two", "three", "four"]; 
    window.setInterval(function() { 
     console.log("setTimeout"); 
     $scope.data.push("five"); 
    }, 1000); 
});

私は何をしないのですか？

ありがとうございます。

出典

2017-02-18 FrozenHeart

setIntervalは、ダイジェストサイクルを実行する角度ダイジェストサイクルシステムを意識しない角度コンテキストから機能します。その結果、バインディングは更新されません。

$intervalというサービスでは、それぞれがintervalのイベントダイジェストサイクルを指定できるようになると、ダイジェストサイクルを開始します。そのため、setIntervalの代わりに$intervalを使用します。あなたが使用することができ、角度によってsetInterval

$scope.$apply();

を使用したい場合は

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

出典

2017-02-18 19:34:41

実際のアプリケーションの問題は少し異なります。 'setInterval'メソッドで配列に新しい要素を追加するのではなく、' WebSocket.onmessage'メソッドで行います。それに応じて 'list-group'を更新するにはどうすればよいですか？ – FrozenHeart

@FrozenHeartあなたはもっと詳しく教えていただけますか？ –

'setInterval'で' $ scope.data.push（ "five"）; 'を実行するのではなく、私は' WebSocket.onmessage'メソッドで同じことを行います – FrozenHeart

一つの方法は、呼び出すことです$interval

DEMO

var app= angular.module("MyApp", []); 
 

 
app.controller("MyController", function($scope) { 
 
    $scope.data = ["one", "two", "three", "four"]; 
 
    window.setInterval(function() { 
 
     console.log("setTimeout"); 
 
     $scope.data.push("five"); 
 
     $scope.$apply(); 
 
    }, 1000); 
 
});

<!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>

出典

2017-02-18 19:35:15 Sajeetharan

ng-repeatは配列変更時に要素を更新しません

答えて

関連する問題