Как получить NgModelController для полей ввода внутри директивы ngRepeat?

Как правило, с формой и полями ввода, контроллер формы публикуется в соответствующей области действия под атрибутом имени формы. И NgModelController публикуется под атрибутом имени ввода. Так для поля ввода с директивой ngModel, то NgModelController для поля ввода может быть получен как $scope.myFormName.myInputFieldNameКак получить NgModelController для полей ввода внутри директивы ngRepeat?

Вопрос в том, как сделать то же самое (получить NgModelController) для полей ввода внутри директивы ngRepeat?

Я хотел бы назвать поля ввода, используя $ index как часть имени, чтобы каждый экземпляр шаблона был уникально назван. Это делает ОК, так

<input name="foo_{{$index}}" ...

делает экземпляр с $ индексом == 3 до

<input name="foo_3" ...

Но пытается получить ngModelController с помощью опубликованных имен не работает (это не определено), например:

$scope.myFormName.foo_3

plunker показывает это здесь: http://plnkr.co/edit/jYDhZfgC3Ud0fXUuP7To?p=preview

это показывает, успешно получая ngModelController для «простого» элемента ввода и вызывая $ setValidity, а также показывает, что не удалось получить ngModelController для элемента ввода внутри директивы ngRepeat.

Скопировал соответствующий раздел кода из приведенного ниже plunker:

<div ng-repeat="element in elements"> 
    <div ng-class="{error: form['foo_{{$index}}'].$invalid}"> 
    <input name="foo_{{$index}}" ng-model="element.a" type="number"> 
    <span ng-show="form['foo_{{$index}}'].$error.bar">ngRepeat bar invalid</span> 
    </div> 
</div> 
{{form.foo_0.$setValidity('bar', false)}}

источник

2013-03-01 TsenYing

Я бы предположил, что проблема заключается в том, что ng-repeat создает новую область видимости и что вы не можете просто получить доступ к детской области: похоже на этот ответ здесь: http://stackoverflow.com/questions/14491433/accessing-the-model -inside-a-ng-repeat Извините, у меня нет хорошей идеи, как изменить это, кроме написания настраиваемой директивы на данный момент:/ –

@Flek верно, что новые дочерние области, созданные ng-repeat, являются корнем проблемы здесь. Поскольку браузеры не допускают вложения элементов формы <, ngForm необходимо использовать при вложенности форм или когда вы хотите выполнить проверку формы внутри ngRepeat.

См. Pawel's answer в разделе группы google, в котором показано, как использовать ng-форму для создания внутренних форм и/или @ blesh's SO answer.

источник

2013-03-02 02:05:07

Этот ответ предоставил информацию, необходимую для решения проблемы. Решение, которое я придумал, заключается в использовании ngForm в сочетании с пользовательской директивой. В качестве фона цель состоит в том, чтобы отображать ошибки проверки на стороне сервера; поэтому обратный вызов представления сервера задает структуру в области видимости. Директива будет наблюдать структуру ошибок. Plunkr, показывающий это решение, находится здесь: http: // plnkr.сотрудничество/редактировать/TdihRm5iMVPb8BsUWihg – TsenYing

Если я правильно понимаю ваш вопрос, вы пытаетесь получить доступ к элементам формы, созданные внутри ng-repeat.

Пожалуйста, взгляните на эту скрипку http://jsfiddle.net/EF5Jp/. Внутри обработчика нажатия кнопки вы получите доступ к элементу с идентификатором myForm.foo_2. Вы можете заметить, что элемент извлекается myForm.foo_2, а не $scope.myForm.foo_2. Во-вторых, изменение значения с использованием его области действия и не использование его значения, как angular.element(element).scope().foo = 6;.

источник

2013-03-02 01:22:44 rajkamal

Спасибо за ввод. Однако мне нужен доступ к ngModelController для модели, чтобы вызвать метод $ setValidity (а не сама модель). – TsenYing

Как получить NgModelController для полей ввода внутри директивы ngRepeat?

ответ

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