Angular pristine в ng-repeat: почему не работает код?

Question

[Артур Бекеров]

Подкажите почему не работает код.

<table class="table table-hover">
        <tr ng-repeat="contact in contacts">
            <form name="contactEditForm{{$index}}">
            <td>
                <input type="text" class="form-control" placeholder="ФИО" ng-model="contact.name">
                <input type="text" class="form-control" placeholder="Дожность" ng:model="contact.position" >
                <button ng-hide="contactEditForm{{$index}}.$pristine" class="save btn btn-primary" ng:click="editContact()">Сохранить</button>

            </td>
            <td>
                
                <input class="form-control" placeholder="Email" ng:model="contact.email" >
            </td>
            <td>
                <input type="text" class="form-control" placeholder="Телефон" ng:model="contact.phone" >
                <input type="text" class="form-control" placeholder="Мобильный" ng:model="contact.mobile" >
            </td>
            <td><textarea type="text" class="form-control" placeholder="Описание" ng:model="contact.feature" ></textarea></td>
            <td><span class="glyphicon glyphicon-remove" ng:click="deleteContact(contact.id)"></span></td>

            </form>
        </tr>
    </table>

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

Answer 1

[Руслан Лопатин]

contactEditForm{{$index}}.$pristine - синтаксическая ошибка. Такое выражение недопустимо в JavaScript.

Comments

[Артур Бекеров]

@lorus спасибо, но консоль ничего не выдает. ка правильней записать тогда?

[Руслан Лопатин]

Эта ошибка возникает во внутреннем парсере angular. Он просто игнорирует ошибки.

Можно, например, просто добавить функцию в контроллер. Что-то типа

$scope.form = function(index) {return $scope['contactEditForm' + index]}

и изменить выражение на form(index).$pristine.

[Руслан Лопатин]

Функцию нужно добавить в контроллер, который видит форму, разумеется. То есть ng-controller должен быть либо у элемента form, либо внутри него.

[Руслан Лопатин]

Ещё проще:

$scope.form= function() {return $scope['contactEditForm' + $scope.$index]}

. ng-hide="form().$pristine"

[Артур Бекеров]

@lorus глянул в итоговый код, оказывается вот такая шляпа есть

а ng-repeat за этой формой

[Артур Бекеров]

@lorus

<form name="contactEditForm0" class="ng-pristine ng-valid"></form>

[styv]

@krekerov скорее всего, вот эта штука
name="contactEditForm{{$index}}" не сработает, хотя в готовом хтмл будет name="contactEditForm0". Выведите скоуп и посмотрите есть ли там свойство contactEditForm0

Answer 2

[kompi]

Погуглим ответ за вас: stackoverflow
Если лень читать, то не создавая ничего нового, можно сделать таким способом:

<tr ng-repeat="contact in contacts">
            <form name="contact.contactEditForm">
        ...
       <button ng-hide="сontact.contactEditForm.$pristine" class="save btn btn-primary" ng:click="editContact()">Сохранить</button>
       ...

Вообщем, вот решение ваших проблем (используйте ng-form) plunker.
Единственное, непонятно, почему ng-form не работает сразу после tr, т.е. пришлось все завернуть в td.

Comments

[Артур Бекеров]

@kompi все немного сложнее

<tr ng-repeat="contact in contacts" class="ng-scope">
            <form name="contact.contactEditForm" class="ng-pristine ng-valid"></form>
            <td>
                <input type="text" class="form-control ng-pristine ng-valid" placeholder="ФИО" ng-model="contact.name">
                <input type="text" class="form-control ng-pristine ng-valid" placeholder="Дожность" ng:model="contact.position">
                <button ng-hide="сontact.contactEditForm.$pristine" class="save btn btn-primary" ng:click="editContact()">Сохранить</button>
            </td>

           
            <td>
                <input type="text" class="form-control ng-pristine ng-valid" placeholder="Телефон" ng:model="contact.phone">
                <input type="text" class="form-control ng-pristine ng-valid" placeholder="Мобильный" ng:model="contact.mobile">
            </td>
            <td><textarea type="text" class="form-control ng-pristine ng-valid" placeholder="Описание" ng:model="contact.feature"></textarea></td>
            <td><span class="glyphicon glyphicon-remove" ng:click="deleteContact(contact.id)"></span></td>

            
        </tr>

На выходе такой код и выходит ошибка Error: [$parse:lexerr] http://errors.angularjs.org/1.2.7/$parse/lexerr?p0...

[kompi]

Посмотрите пример plunker

[Артур Бекеров]

@kompi обменяемся контактами? мне требуется angular разработчик

[Артур Бекеров]

@kompi Я отправил емейл. Подскажите еще, как получить доступ к этой форме? я ее хочу бекенду отправить. по $scope не могу к ней достучаться. undefined пишет

[kompi]

Оберните эти формы в обычную. Через неё можно будет получить доступ к внутренним.