2014-12-06 104 views
0

我想要獲取哪些數據已在數組中更改。我的用例是第一次所有數據從ajax中獲取並顯示在行內並每5秒使用$ http獲取新數據。如果新數據與舊數據相同,我需要知道。如果是的話那麼它的值發生了變化,所以我已經來更新後臺一些顏色..如何知道數組中的哪些數據已被更改?

我已經嘗試過

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,但它不起作用。

回答

1

你有角的雙向數據綁定,它會自動更新您的NG-重複時模型的變化。我建議如下 1)先移除RentalDate控制器 2)使用$超時,並在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

+0

礦山代碼已經在更新DOM。我只需要,如果一些值已經在數組中改變,結果​​背景將是綠色的。假設第一次獲取一個屬性值是9,第二次獲取後該值已更改爲10,所以我需要顯示​​屬性背景爲綠色 – Tariq 2014-12-06 07:33:36

+0

我明白了,對不起,我在2點左右回答了這個問題。那麼,你可以做的是先按照我所說的清理你的代碼,然後像@Anubhav一樣做,但首先創建一個名稱和一個像{flag:'foo',isNew: 'true'}然後遍歷數組並替換row.Third_column與對象,當你發現與舊的不一樣的東西時,改變標誌。現在你有一個自定義的$ scope.listing ...你可以把ng-class =「'make-green':row.Third_Column.isNew」並寫入css approriately。 – gsalisi 2014-12-06 15:40:55

+0

順便說一句,你應該循環所有的值,並在收到數組時檢查相等性。沒有比這更快的方式,但這是它唯一的BigTheta(n)運行時。 – gsalisi 2014-12-06 15:43:23

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

    }); 
+0

它總是顯示'新數據可用!'我仍然沒有得到改變的價值。我想要的是這個。一旦數值發生變化,​​就會有幾秒鐘的綠色背景。 – Tariq 2014-12-06 07:13:48

相關問題