2016-12-23 3 views
1

값 목록을 제공하고 목록의 각 값에 대해 input[number] 필드를 표시 할 수 있도록 양식 구성 요소를 만들고 있습니다.
문제는 number 프리미티브가 아닌 객체의 목록이므로 각 객체의 입력과 숫자 속성간에 데이터 바인딩을 설정하는 좋은 방법이 필요합니다.
이 숫자 속성은 내 구성 요소의 범위 특성을 통해 동적으로 설정됩니다.AngularJS : 개체의 속성을 ngModel에 바인딩

내 데이터는 다음과

$scope.ngModelList = [{foo: 'bar', num: 1}, {foo: 'baz', num: 3}]; 

처럼 보일 수 있고 객체 속성은 우리가 (고정하려면 다음 중 하나를 바인딩 할 거라고 가정 할 때 내 입력이

<div class="inputs" 
    data-ng-repeat="model in ngModelList"> 

    <input type="number" 
     data-ng-model="model"> 

</div> 

답변

0

처럼 다소 보면 별로 유용하지 않다.) 또는 항상 존재하도록 요구한다면, 대답은 오히려 직설적이다.

우리는 속성 이름을 Google 지시문의 속성 중 하나로 요구하기 만하면됩니다. ngModelProperty이며 다음과 같은 해결책이 있습니다. 우리가 특별히 ngModelPropertyngModelProperty: "@?" 선택 사양 일하려면

directive("multiNumberForm", function() { 
    return { 
     scope: { 
      ngModelList: "=", // Array<Object> of models to bind to 
      ngModelProperty: "@" // Property of each Object for actual binding 
     } 
     ... 
    } 
}; 

그리고 우리의 템플릿

<div class="inputs" 
    data-ng-repeat="model in ngModelList"> 

    <input type="number" 
     data-ng-model="model[ngModelProperty]"> 

</div> 

그러나 만약에

은,이 솔루션은 적은 간단합니다.
해결책을 찾 자마자 여기에 답변을 게시하겠습니다. 같은

1
<div class="inputs" 
    data-ng-repeat="model in ngModelList"> 

    <input type="number" 
     data-ng-model="{{ model.foo }}"> 

</div> 

뭔가?

+0

ngModel 속성은 양방향으로 바인딩되므로 해당 중괄호를 사용하지 않아야합니다. 'data-ng-model = "model.foo"' – Michiel

0

당신은 당신이 ngModel로 model.num를 사용하는 경우, 그것은 특정 모델의 num 속성에 바인딩이 방법이 될 것입니다

<div class="inputs" data-ng-repeat="model in ngModelList"> 
    <input type="number" data-ng-model="model.num"> 
</div> 

를 사용할 수 있습니다.