如何知道数组中哪些数据已更改?

时间:2014-12-06 05:55:14

标签: javascript ajax angularjs watch

我试图获取数组中已更改的数据。我的用例是第一次从ajax获取所有数据并在行内显示并使用$ http每5秒获取一次新数据。我需要知道,如果新数据与旧数据相同。如果是,则更改了哪个值,以便我将该背景更新为某种颜色..

我已经尝试了什么

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

    app.controller('listingController', function($scope, $http, $timeout){

        $scope.listings;

        setInterval(function(){ 
            $http.get('_includes/ajax.php?req=get').
                success(function(data, status, headers, config) {
                  $scope.listings = data;
                  console.log(data);
                }).
                error(function(data, status, headers, config) {
                  // log error
            }); 

        }, 5000);

    });

    app.controller('RentalDateController', function($scope, $log){

         console.log($scope.listings);
         $scope.$watch('listings.Third_Column', function (Third_Column, oldvalue) {
            //$log.info(Third_Column, $scope.listings.First_Column);
             console.log('being watched oldValue:', oldvalue, 'newValue:', Third_Column);
          }, true);
    });

我的HTML是

<body ng-app="app">
    <div ng-controller="listingController">


    <table>
        <tr>
            <th>Testing</th>
            <th>Pripse</th>
        </tr>

        <tr ng-repeat="row in listings" ng-controller="RentalDateController">
            <input type="text" ng-model="row.Third_Column">
            <input type="text" ng-model="row.First_Column">
            <th>{{row.Third_Column}}</th>
            <th>{{row.First_Column}}</th>
        </tr>

    </table>
    </div>
</body>

我想我需要使用$ watch,但它不起作用。

2 个答案:

答案 0 :(得分:1)

您具有角度双向数据绑定,因此在模型更改时它应自动更新ng-repeat。

我建议如下 1)首先删除RentalDate控制器。 2)使用$ timeout,并在http成功时使用此

$scope.$apply(function(){
  $scope.listing = data;
});

如果仍然没有自动更新,请将数组放入对象中。

$scope.data = {}
$scope.data.listings = putArrayHere();

这将因此而起作用。读起来。 :d

https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

答案 1 :(得分:0)

尝试这样做:

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

    app.controller('listingController', function($scope, $http, $timeout){

        $scope.listings;
        var previousListing = [];
        var newData;

        setInterval(function(){ 
            $http.get('_includes/ajax.php?req=get').
                success(function(data, status, headers, config) {
                  $scope.listings = data;
                  console.log(data);
                }).
                error(function(data, status, headers, config) {
                  // log error
            });

            if( previousListing.length == $scope.listings.length )
            {
                console.log('No new data available.');
            }
            else
            {
                // length of the arrays are different, hence new data must be available
                console.log('New data available!');
                newData = $scope.listings.splice( 0, ($scope.listings.length - previousListing.length) ); // returns new data in the form of an array
                console.log(newData);
                previousListing = $scope.listings; // reset previous data variable

            }

        }, 5000);

    });