[angularjs] angularjs에서 배열을 자세히 보는 방법은 무엇입니까?

내 범위에는 객체 배열이 있으며 각 객체의 모든 값을보고 싶습니다.

이것은 내 코드입니다.

function TodoCtrl($scope) {
  $scope.columns = [
      { field:'title', displayName: 'TITLE'},
      { field: 'content', displayName: 'CONTENT' }
  ];
   $scope.$watch('columns', function(newVal) {
       alert('columns changed');
   });
}

내가 값, 예를 들어 나는 변화를 수정할 때 TITLE까지을 TITLE2의 alert('columns changed')튀어하지 않습니다.

배열 내부의 객체를 자세히 보는 방법은 무엇입니까?

라이브 데모가 있습니다 : http://jsfiddle.net/SYx9b/

답변

당신의 세번째 인수 설정할 수 있습니다 $watch로를 true:

$scope.$watch('data', function (newVal, oldVal) { /*...*/ }, true);

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch를 참조 하십시오.

Angular 1.1.x부터 $ watchCollection을 사용하여 컬렉션의 얕은 시계 ( “첫 번째 수준”)를 볼 수도 있습니다.

$scope.$watchCollection('data', function (newVal, oldVal) { /*...*/ });

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection을 참조 하십시오.

답변

$ watch에 객체를 딥 다이빙하면 성능이 저하됩니다. 때때로 (예를 들어, 변경 사항이 푸시 및 팝만 가능한 경우) array.length와 같이 쉽게 계산 된 값을 $ watch 할 수 있습니다.

답변

하나의 배열 만 보려는 경우이 코드를 간단히 사용할 수 있습니다.

$scope.$watch('columns', function() {
  // some value in the array has changed 
}, true); // watching properties

예

그러나 이것은 여러 배열에서 작동하지 않습니다.

$scope.$watch('columns + ANOTHER_ARRAY', function() {
  // will never be called when things change in columns or ANOTHER_ARRAY
}, true);

예

이 상황을 처리하기 위해 일반적으로보고 싶은 여러 배열을 JSON으로 변환합니다.

$scope.$watch(function() {
  return angular.toJson([$scope.columns, $scope.ANOTHER_ARRAY, ... ]);
},
function() {
  // some value in some array has changed
}

예

@jssebastian이 주석에서 지적했듯이 ‘$’로 시작하는 멤버 및 다른 경우도 처리 할 JSON.stringify수 있으므로 바람직 angular.toJson할 수 있습니다.

답변

Angular 1.1.x 이상에서는 이제 $ watch 대신 $ watchCollection을 사용할 수 있습니다 . $ watchCollection은 얕은 시계를 만드는 것처럼 보이지만 예상대로 객체 배열에서 작동하지 않습니다. 배열에 대한 추가 및 삭제를 감지 할 수 있지만 배열 내의 객체 속성은 감지 할 수 없습니다.

답변

다음은 예제를 사용하여 범위 변수를 볼 수있는 3 가지 방법을 비교 한 것입니다.

$ watch () 는 다음에 의해 트리거됩니다.

$scope.myArray = [];
$scope.myArray = null;
$scope.myArray = someOtherArray;

$ watchCollection () 은 AND 이상의 모든 항목에 의해 트리거됩니다.

$scope.myArray.push({}); // add element
$scope.myArray.splice(0, 1); // remove element
$scope.myArray[0] = {}; // assign index to different value

$ watch (…, true) 는 AND 위의 모든 항목에 의해 트리거됩니다.

$scope.myArray[0].someProperty = "someValue";

한 가지 더…

$ watch () 는 다른 배열의 내용이 동일하더라도 배열을 다른 배열로 바꿀 때 트리거하는 유일한 것입니다.

예를 들어, 다음과 같은 경우에 $watch()발생합니다 $watchCollection().

$scope.myArray = ["Apples", "Bananas", "Orange" ];

var newArray = [];
newArray.push("Apples");
newArray.push("Bananas");
newArray.push("Orange");

$scope.myArray = newArray;

아래는 모든 다른 시계 조합을 사용하고 트리거 된 “시계”를 나타내는 로그 메시지를 출력하는 예제 JSFiddle에 대한 링크입니다.

http://jsfiddle.net/luisperezphd/2zj9k872/

답변

$ watchCollection은 원하는 것을 수행합니다. 아래는 angularjs 웹 사이트 ( http://docs.angularjs.org/api/ng/type/$rootScope.Scope) 에서 복사 한 예입니다.
편리하지만 특히 대규모 컬렉션을 볼 때 성능을 고려해야합니다.

  $scope.names = ['igor', 'matias', 'misko', 'james'];
  $scope.dataCount = 4;

  $scope.$watchCollection('names', function(newNames, oldNames) {
     $scope.dataCount = newNames.length;
  });

  expect($scope.dataCount).toEqual(4);
  $scope.$digest();

  //still at 4 ... no changes
  expect($scope.dataCount).toEqual(4);

  $scope.names.pop();
  $scope.$digest();

  //now there's been a change
  expect($scope.dataCount).toEqual(3);

답변

이 솔루션은 저에게 매우 효과적이었습니다. 지시서 에서이 작업을 수행하고 있습니다.

scope. $ watch (attrs.testWatch, function () {…..}, true);

true는 꽤 잘 작동하며 모든 chnages에 반응합니다 (필드 추가, 삭제 또는 수정).

여기에 작동하는 플런저가 있습니다.

AngularJS에서 배열을 깊이 관찰

이것이 당신에게 도움이되기를 바랍니다. 질문이 있으시면 언제든지 문의하십시오.)