AngularJS의 범위 및 변수 출력

Question

내 검색 : JSON 파일을 통해 ng-repeat로 만든 슬라이더 페이지. 각 슬라이더의 값을 보여주는 범위. 입력은 (value of the slider * a grams value per selected unit)입니다.

Here's my Plunkr with multiple sliders, each with a selection of 2 food values.

I가 이전의 질문과 같이 메인 컨트롤러에서 0으로 초기화하는 경우 내 첫 번째 문제는, 인 0으로 초기화한다 슬라이더의 출력을 나타내는 스팬, 이것은 범위 변경 슬라이더 demoVals.slider 그래서 페이지의 모든 슬라이더는 이제 한마음으로 작동하는지 :

//assign initial values 
    $scope.demoVals = {}; 
    $scope.demoVals.slider = 0; 

당신은 그 줄을 주석하는 경우, 각 슬라이더는 이제 개별적으로 다시 작동 할 수 있습니다.

는 I는 I가 NG 모델로 출력 & 각 슬라이더 & NG 바인드를 고유 식별자를 부여하여이를 해결할 수 있다고 생각되지만 그곳에는 초기화가 각각 개별적으로 발생되도록 범위를 제한하는보다 나은 방법 응?

내 다음 문제는 출력 값에 곱하기 함수를 호출하려고합니다. 선택한 그램 단위 (템플릿에서 {{ unit-grams }}으로 액세스 가능)를 컨트롤러에 전달하고 결과를 값으로 반환 할 수 있습니까? input? "각 슬라이더 & 출력의 NG 모델 & NG-바인딩에 고유 한 식별자를 할당하여"나는 당신이 실제로이 (당신이 무엇을 의미합니까 해결하려고 노력 무엇을 아주 확실하지 않다

//calculate weight 
    $scope.$watch('demoVals.slider', function (newVal) { 
     if (typeof newVal !== 'undefined') { 
      $scope.calculated = newVal * 3.14159; //an arbitrary number that I want to be the variable unit.grams 
     } 
     }); 

Answer 1

?). 그러나 각 푸드 슬라이더에 대해 별도의 값을 원할 경우 자연에서이 객체에 속하는 음식 객체의 요소 여야합니다.

demoVals.slider 대신에 예를 들어. food.slider. 또한, 즉 ng-init="food.slider=0;"

나는 Plunkr 갱신이 사용 ng-init 초기화 할 수 있습니다 : http://plnkr.co/edit/CbkSZpzoqXwcMkV1EDdp?p=preview

그러나, 그것의 자신의 음식 컨트롤러에이 모든 것을 분리하는 것은 좋은 생각처럼 보인다. 이렇게하면 각 food 항목을 자체 범위에서 처리 할 수 ​​있습니다.