개체 배열의 속성 값 변경시 트리거 함수

Question

다음은 내 개체 배열의 샘플입니다.

$scope.arr = [{"A":"a","B":"b"},{"A":"c","B":"d"},{"A":"e","B":"f"},{"A":"g","B":"h"}]; 

이제 속성 "A"값이 변경 될 때마다 함수를 트리거하고 싶습니다. 기본적으로 이 비어 있지 않은 "A"의 개수를 얻으려면 값이 필요합니다. 다음은 트리거해야하는 샘플 시나리오입니다.

• "A"값이 새로 추가 된 개체에 대해 배열로 변경된 경우.
• 속성 "A"에 값이 들어있는 경우 개체가 제거되었습니다.
• 값이 객체
• 에 "A"를 비우 추가 한 경우 만약 객체

내가 각도 시계 문서를 통과하고이 가능한 솔루션에 "A"의 비운 기존 값. 하지만 내 문제는 특정 속성 ("A")에 의 모든 객체 배열을 감시하는 것입니다.

감사합니다.

Angular에서 가능한 해결책이 없으면 underscore.js에 대한 대체 솔루션이 있습니까?

Answer 1

$watch을 사용하여 수행 할 수 있습니다.

예컨대 : 여기

$scope.$watch("arr",function (newVal,oldVal){ 
    angular.forEach(newVal,function (val,index){ 
     if(oldVal.indexOf(val)== -1){ 
       //your code 
       } 
     }) 

},true); 

세 번째 인수 'true은'깊은 검사입니다.

$scope.$watch("arr",function (newVal,oldVal){ 
    console.log("value has changed from "+oldVal+" to "+newVal); 
},true); 

을하지만이 슈퍼 비싼 : AngularJS와 들어

Answer 2

는 $scope.$watch있다. 바닐라 자바 ​​스크립트를

, 여기 here

/* 
* object.watch polyfill 
* 
* 2012-04-03 
* 
* By Eli Grey, http://eligrey.com 
* Public Domain. 
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. 
*/ 

// object.watch 
if (!Object.prototype.watch) { 
    Object.defineProperty(Object.prototype, "watch", { 
      enumerable: false 
     , configurable: true 
     , writable: false 
     , value: function (prop, handler) { 
      var 
       oldval = this[prop] 
      , newval = oldval 
      , getter = function() { 
       return newval; 
      } 
      , setter = function (val) { 
       oldval = newval; 
       return newval = handler.call(this, prop, oldval, val); 
      } 
      ; 

      if (delete this[prop]) { // can't watch constants 
       Object.defineProperty(this, prop, { 
         get: getter 
        , set: setter 
        , enumerable: true 
        , configurable: true 
       }); 
      } 
     } 
    }); 
} 

// object.unwatch 
if (!Object.prototype.unwatch) { 
    Object.defineProperty(Object.prototype, "unwatch", { 
      enumerable: false 
     , configurable: true 
     , writable: false 
     , value: function (prop) { 
      var val = this[prop]; 
      delete this[prop]; // remove accessors 
      this[prop] = val; 
     } 
    }); 
}