2014-12-06 3 views
0

배열에서 변경된 데이터를 가져 오려고합니다. 내 사용 사례는 아약스에서 가져온 모든 데이터를 처음으로 가져와 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

+0

나는 미안해 이것을 2am 전후로 대답하고있었습니다. 먼저 코드를 정리 한 다음 @Anubhav와 같은 접근 방식을 따르지 만 먼저 {name : 'foo', isNew :와 같은 이름과 플래그가있는 객체 배열을 만듭니다. 'true'} 그런 다음 배열을 통과하여 row.Third_column을 개체로 바꿉니다. 이전 개체와 같은 것이 아닌 개체를 찾으면 플래그를 변경합니다. 이제 $ scope.listing을 사용자 정의했습니다. ng-class = " 'make-green': row.Third_Column.isNew"를 입력하고 CSS를 쓸 수 있습니다. – gsalisi

+0

Btw, 배열을받을 때 모든 값을 반복하여 평등을 수동으로 확인해야합니다. 이보다 더 빠른 방법은 없지만이 방법은 유일한 BigTheta (n) 런타임입니다. – gsalisi

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

관련 문제