ng-repeat 对象数组 nodejs答案

【问题标题】：ng-repeat array of objects nodejsng-repeat 对象数组 nodejs
【发布时间】：2014-03-12 03:49:30
【问题描述】：

我将 angularJS 与一个使用 socketio 发送数据的节点后端一起使用。然后我尝试使用 ng-repeat 显示数据。如果我在控制器中初始化数据，那么 ng-repeat 可以正常工作，但是如果我在从服务器接收到数据时添加数据，那么使用 ng-repeat 时屏幕上不会显示任何内容。

这是我正在使用的代码的 sn-p： (trans.html)

<div id='trans' ng-app='MyApp'>
    <h1>Transactions</h1>
    <div class="pure-g-r" ng-controller='TransController'>
        <div class="pure-u-1-2" ng-repeat="trans in transactions">
            <h1>{{ trans.name }}</h1>
            <p>{{ trans.description}}</p>
            <p>{{ trans.date }}</p>
            <p>{{ trans.category }}</p>
        </div>
    </div>

</div>

<script src="/js/loadAngular.js"></script>

（控制器.js）

  function TransController($scope, socket) {
    $scope.transactions = [];
    $scope.currentMonth = "March";
    $scope.categories = [];

    init();

    function init() {
        console.log("emitting init functs");
        socket.emit('data', {request: 'transactions', month: $scope.currentMonth});
        socket.emit('getCategories', {});
    };

    socket.on('dataResponse', function (data) {
        console.log(data);  
        if(data.response === 'transactions'){
            $scope.transactions = [];
            var tran = data.data;
            for(var i = 0; i < tran.length; i++){
                $scope.transactions.push(tran[i]);
                console.log(tran[i]);
            };
        }
        console.log($scope.transactions);
        console.log("CURRENT MONTH " + $scope.currentMonth);
    });

(server.js)

   var myTransactions = {
        January : [{
            name: "Tesco shopping",
            date: "January",
            description: "This is my description, I went to the shop and bought loads of food.",
            category: "Food"
    }],
        February : [],
        March : [{
            name: "Booze shopping",
            date: "March",
            description: "This is my description, I went to the shop and bought loads of food.",
            category: "Food"
    },{
            name: "Tesco shopping",
            date: "March",
            description: "This is my description, I went to the shop and bought loads of food.",
            category: "Food"
    }],
    ...
    };

    mudev.addCustomEvent('data', function(socket,data){
        var request = data.request;
        var month = data.month;
        console.log("Data Request: request:",request, " month:",month);
        if(month==null){
            socket.emit('dataResponse', {
                response: 'transactions',
                data: myTransactions
            });
        }else{
            socket.emit('dataResponse', {
                response: 'transactions',
                data: myTransactions[month]
            })
        }

    });

我可以看到的数据之间的唯一区别是，当我在控制器内静态初始化数据时，有一个名为“HashKey”的额外键在从服务器发送数据时不存在。我再次阅读了 angular 文档，但找不到任何关于此问题的信息。

不胜感激。（这和ng-repeat over an array of objects不是同一个问题）

【问题讨论】：

您是否尝试过添加 $scope.$apply();到 dataResponse 回调的最后一行？
谢谢，好像已经解决了。几周前我读到过，但完全忘记了
很高兴看到它有所帮助。所以你即将关闭 Q。

标签： javascript node.js angularjs socket.io

【解决方案1】：

$scope.$apply();

用于函数回调。

【讨论】：

【解决方案2】：

正如 Eugene P 所建议的，添加 $scope.$apply() 会刷新视图以更新数据。将此添加到 dataResponse 回调的末尾会更新屏幕上的数据。

这篇文章（我已经忘记了）更详细地解释了如何使用带有 angular 的 socketio。 http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/

感谢您的回答:)

【讨论】：