2016-12-23 4 views
1

Я создаю компонент формы, который позволит вам указать список значений и показать поля input[number] для каждого значения в списке.
Проблема в том, что это список объектов, а не числовых примитивов, и мне нужен хороший способ установить привязку данных между моими входом и свойством number в каждом объекте.
Это свойство номера будет динамически задано с помощью атрибута scope на моем компоненте.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

При предположении, что свойство объекта, мы будем иметь привязку к либо фиксированной (не очень полезно), или если мы требуем, чтобы он всегда присутствовал, ответ довольно прост.

Мы просто потребуем имя свойства как один из атрибутов нашей директивы, например. ngModelProperty и имеют следующее решение.

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> 

Если, однако, если мы хотим специально ngModelProperty быть необязательным, ngModelProperty: "@?", решение менее очевидно.
Как только я нахожу решение для этого, я отправлю ответ здесь.

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

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

</div> 

Нечто подобное?

+0

Атрибут ngModel имеет двустороннюю привязку, поэтому вам нужно будет оставить эти фигурные скобки. 'Данных нг-модель = "model.foo"' – Michiel

0

Вы можете использовать

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

При использовании model.num в ngModel, это будет 2 способ связывания с атрибутом Num той или иной модели.

 Смежные вопросы

  • Нет связанных вопросов^_^