ng-repeat 不动态添加新项目答案

【问题标题】：ng-repeat not adding new items dynamicallyng-repeat 不动态添加新项目
【发布时间】：2016-12-16 07:13:56
【问题描述】：

我是 Angular JS (1) 的新手，我遇到了 ng-repeat 的问题。我正在使用带有 Angular 的 socket.io。这是我的控制器：

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-repeat。任何帮助将不胜感激。

【问题讨论】：

推送到数组后添加$scope.$apply()。
@Raj 是的，就是这样！将其发布为正确答案，我会接受。那么什么是 $apply。它是否通知前端模型中的某些内容发生了变化？我们是否只在执行异步操作时或在模型更改时随时 $apply？

标签： angularjs socket.io angularjs-ng-repeat

【解决方案1】：

在推送到数组后添加 $scope.$apply()。因为您正在更新角度范围之外的模型。所以angularjs不知道模型已经更新。更多关于 $scope.$apply http://tutorials.jenkov.com/angularjs/watch-digest-apply.html

【讨论】：

【解决方案2】：

您正在将对象推入数组并尝试迭代数组。所以你应该指定位置。

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

【讨论】：