AngularJS 모델에서 배열의 모든 요소에 계산 된 필드 추가

Question

JSON 데이터 소스에서 사용자 배열을 내 AngularJS 모델로 가져옵니다. 이 데이터는 테이블에서 렌더링되고 있으며 기본 데이터 서비스를 수정하지 않고 기존 사용자 개체의 두 값에서 계산 된 열을 만들고 싶습니다. 내 부분 템플릿에서

// My model 
function UserListCtrl($scope,$http) { 
$http.get('users').success(function(data) { 
    $scope.users = data; 
}); 
}; 

, 난 이런 식으로 뭔가 할 수있는 알고

<tr ng-repeat="for user in users"> 
    <td>{{user.data/user.count | number:2}}</td> 
</td> 

을하지만 오히려 모델에 해당 필드를 추가 할 것, 그래서 나는과 같이 사용할 수 있습니다 :

<td>{{user.amplification}}</td> 

내 모델의 모든 사용자에게 "증폭"필드를 추가하려면 어떻게합니까?

이

<td>{{user.data/user.count | number:2}}</td> 

Answer 1

당신은 eather 수 있습니다 : 여담으로

은 가능 이런 식의 orderBy 필터를 사용하는 것입니다

1. 로딩 사용자가 수행 한 직후 :

   $를 http.get ('users'). success (function (data) { $ scope.users = data; $ scope.user.amplification() = function() {return $ scope.u ser.data/$ scope.user.count; } }); .

   $ 범위 $ 시계 ('사용자'함수() {$ scope.userAmplification = $ scope.user : 컨트롤러 어디서나 {{user.amplification()}}

   1. 로

   사용 .data/$ scope.user.count; }, true); $ http.get

2. 또는 user.data/count가 변경되지 않는 경우에, 1과 동일한 기능을 수행하지만 staticly 계산한다.

   $ http.get ('사용자') 성공 (기능 (데이터) { $ scope.users = data; $ scope.user.amplification = $ scope.user.data/$ scope.user.count; }); 업데이트하기 위해 amplicification() 기능이 필요하지 않은 경우

그리고 OrderBy은 표현식 (다른 필터의 uncluding 결과)

Answer 2

에 사용될 수있는 때 user 갱신에 data 및 count 특성, 당신이 할 수있는 컨트롤러에서 같은 것을 할 : 나는 내 첫 번째는 별개의로 적절한 느낀다으로

$scope.users.forEach(function(user) { 

    user.amplification = function() { 

     return user.data/user.count; 

    }; 

}); 

Answer 3

두 번째 대답을 추가.

주위를 조금 둘러 본 후에 동적으로 새 행을 추가하려고하거나 원래 계산 된 값에 의존하는 배열에 새 요소를 추가하려고하면 원래 게시 한 메소드가 넘어지는 것을 발견했습니다. 컨트롤러를 만들 때 $scope.array.forEach() 만 실행되기 때문입니다.

이 문제를 해결하는 가장 좋은 방법은 원하는 옵션이 포함 된 object을 올바르게 정의하는 것입니다. 예 :

function Task(id, name, prop1, prop2) { 

    this.id = id; 
    this.name = name; 
    this.prop1 = prop1; 
    this.prop2 = prop2; 

    this.computedProperty = function() { 

     return this.prop1 + this.prop2; 

    }; 

} 

생성 된 새 개체가 새로운 속성을 가질 때마다 훨씬 융통성이 있습니다.

유일한 단점은 아약스 성공 콜백에서 각 사용자를 'Users()'생성자에 전달해야한다는 것입니다.

Answer 4

나를 위해 일한 것은 루프를 추가하고 해당 루프의 각 항목에 속성을 추가하는 것이 었습니다. 컨트롤러의 속성을 사용했지만 질문에서 접근하는 방식대로 범위를 사용할 수 있다고 확신합니다.

function(result) { 
    self.list = result; 
    angular.forEach(self.list, function(item) { 
     item.hasDate = function() { 
      return this.TestDate != null; 
     }.bind(item); // set this context 
    }); 
} 

그런 다음 내 마크 업에서이 코드를 사용했습니다.

<div ng-repeat...> 
    <div ng-show="item.hasDate()">This item has a date.</div> 
</div>