ng-repeat新しいアイテムを動的に追加しない

私はAngular JS（1）を初めて使用しており、ng-repeatに問題があります。 socket.ioとAngularを使用しています。私のコントローラは以下の通りです：ng-repeat新しいアイテムを動的に追加しない

var messagingApp = angular.module('messagingApp', []); 

function mainController($scope) { 

    var socket = io.connect(); 
    socket.on('message', function(data){ 
     $scope.users.push({'Name': 'yeh'}); 
     console.log($scope.users); 
    }); 

    $scope.users = []; //if I put stuff here and comment out socket stuff, it shows in the front-end 
}; 

messagingApp.controller('mainController',mainController);

私はそれが（console.logを介して）ブロック内にあることがわかります。ただし、フロントエンドには何も表示されません。次のように私のフロントエンドは、次のとおりです。

<body ng-controller="mainController"> 

<div ng-repeat="user in users"> 
    <p>{{ user.Name }}</p> 
</div>

私の理解では、モデル（この場合はユーザー）を変更した場合、それは自動的にNGリピートを更新するべきであるということです。どんな助けもありがとう。

出典

2016-12-16 fur866

$スコープを追加します。$（適用）配列にプッシュした後。 – Raj

@Rajはい、それでした！適切な回答として投稿し、私はそれを受け入れます。それで$が何を適用しますか？モデル内の何かが変更されたことをフロントエンドに通知しますか？私たちは、非同期のものをやっているときだけ、あるいはモデルが変更されたときはいつでも適用できますか？ – fur866

配列にプッシュした後に、$ scope（$ apply（）を追加します）。角度範囲外でモデルを更新するためです。したがって、angularjsはモデルが更新されたことを知らない。 $ scopeの詳細$ http://tutorials.jenkov.com/angularjs/watch-digest-apply.html

出典

2016-12-16 07:37:59 Raj

あなたは配列内のオブジェクトを押して、配列を反復しようとしています。したがって、あなたは位置を指定するべきです。

<body ng-controller="mainController"> 
    <div ng-repeat="user in users"> 
     <p>{{ user[$index].Name }}</p> 
    </div>

またはこれを試してみてください。..

socket.on('message', function(data){ 
     $scope.users.data.push({'Name': 'yeh'}); 
     console.log($scope.users.data); 
    }); 

    $scope.users = {data:[]}; 





<div ng-repeat="user in users.data"> 
     <p>{{ user.Name }}</p> 
    </div>

出典

2016-12-16 14:03:25

ng-repeat新しいアイテムを動的に追加しない

答えて

関連する問題