Использование ng-show в Angular с условием ИЛИ и НЕ

Можно ли использовать ng-show на основе двух условий, я думаю, в данном случае 3 условий. Я знаю, что, вероятно, могу сделать это с помощью функции или директивы, но это происходит при загрузке представления и распространении данных в динамически генерируемые элементы формы с использованием ng-repeat. На этом этапе было бы проще добавить условие в ng-show, поскольку фактический ввод не помечен как недействительный, а сама форма по-прежнему будет отправляться как действительная. Когда форма впервые загружает последний элемент в динамически созданной форме, отображается сообщение об ошибке, как будто оно недействительно, пока $touched = true и $veiwValue не изменится.

Для простоты мое ng-show выглядит так:

<div class="list-help-block" ng-messages="emails_form.email.$error" ng-show="emails_form.email.$dirty || emails_form.email.$invalid">
    <div ng-messages-include="/app/views/messages.html" ></div>
</div>

Это отображает сообщения об ошибках в случае недопустимой записи и при ошибке при отправке формы. Однако он также отображает сообщение об ошибке (которого даже не должно быть) при загрузке формы. И как раз по последнему вводу динамически добавляется в форму.

Я хотел бы сделать что-то вроде этого:

ng-show="emails_form.email.$dirty || emails_form.email.$invalid NOT mails_form.email.$pristine"

Я даже не знаю, возможно ли это или можно ли вызвать функцию для исправления проверки после полной загрузки представления и добавления данных в модель. Какие-либо предложения?

Вот весь раздел, который используется для этого:

<div ng-repeat="emails in info.instructor.instructor_emails">
    <ng-form name="emails_form" novalidate>
        <div class="input-group">
            <span class="input-group-label">
            <span ng-show="info.instructor.instructor_emails.length==1">@</span>
            <span ng-show="info.instructor.instructor_emails.length>=2"><a ng-click="updateRemoveEmail($index)"><i class="fi-x"></i></a></span>
        </span>                                             
    <input ng-class="{ notvalid: submitted && emails_form.email.$invalid }"type="email" placeholder="[email protected]" name="email" ng-model="emails.email" ng-required="info.instructor.instructor_emails.length>=2"/>
    </div>
    <div class="list-help-block" ng-messages="emails_form.email.$error" ng-if="!emails_form.email.$pristine && (emails_form.email.$dirty || emails_form.email.$invalid)">
    <div ng-messages-include="/app/views/messages.html" ></div>
</div>


javascript angularjs angularjs-ng-form
person OGZCoder    schedule 21.07.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

В качестве предложения я бы рекомендовал вам использовать ngIf вместо ngShow в качестве хорошей практики.

Насколько я понял ваш NOT, он должен работать:

ng-if="!emails_form.email.$pristine && (emails_form.email.$dirty || emails_form.email.$invalid)"
person developer033    schedule 21.07.2016
comment
Это работает, когда вы загружаете представление в первый раз, но убивает отображение требуемой ошибки при динамическом добавлении нового ввода. Чтобы увидеть основную идею того, как я добавляю поля, ознакомьтесь с ссылкой. поможет понять, как я это делаю. - person OGZCoder; 22.07.2016
comment
Чего вы ожидаете, когда пользователь нажимает Add Email? - person developer033; 22.07.2016
comment
Я хочу, чтобы он добавил поле, которое необходимо проверить, и показать сообщение об ошибке проверки, они также $ pristine = true при добавлении в форму, поэтому ng-if, как указано выше, не позволяет этим полям отображать сообщение проверки, когда эти поля проверяются , основной код для добавления и удаления полей находится в plunker. мой код, но он немного запутан, если честно - person OGZCoder; 22.07.2016
comment
Короче говоря, после того, как пользователь добавит электронное письмо, вы хотите показать сообщение, не так ли? - person developer033; 22.07.2016
comment
Да, как только пользователь добавит поле электронной почты, я хочу, чтобы отображалось требуемое сообщение, а не ошибка электронной почты при загрузке формы - person OGZCoder; 22.07.2016
comment
Это рабочий человек.. вы только что допустили ошибку в <ng-form="sub_form">.. измените его на: <ng-form name="sub_form">. Кроме того, вы находитесь на ngRepeat, вам нужно использовать другой синтаксис для привязки ваших имен/ngModel, и если вы хотите отобразить требуемое сообщение... сначала у вас должно быть одно обязательное сообщение, а у вас его нет. - person developer033; 22.07.2016
comment
Это правильный способ его использования: plnkr.co/edit/bfY0aCohT6JWDaNjYzLQ?p=preview - person developer033; 22.07.2016
comment
Я забыл, как это было закодировано в plunkr, я уже исправил это в своем коде. Я разместил весь блок кода в ng-repeat выше, и все, что делает кнопка добавления электронной почты, — это вталкивает объект в $scope, загружая эти динамически добавляемые поля. - person OGZCoder; 22.07.2016
comment
как вы можете сказать, я новичок в angular, я в основном кодер PHP, выполняющий всю эту серверную часть, я пытаюсь повысить производительность, выполняя большую часть клиентской бизнес-логики через RESTful API, который используется только для выборки и поместите данные на сторону сервера базы данных - person OGZCoder; 22.07.2016
comment
Ваш плункер в значительной степени делает это, за исключением того, что я хочу показать требуемое сообщение об ошибке, как только будет добавлено электронное письмо. - person OGZCoder; 22.07.2016

arrow_upward
0
arrow_downward

Это работает:

<div class="list-help-block" ng-messages="emails_form.email.$error" ng-if="  (!emails_form.email.$pristine && (emails_form.email.$dirty || emails_form.email.$invalid)) || (emails_form.email.$pristine && emails_form.email.$error.required) ">
    <div ng-messages-include="/app/views/messages.html" ></div>
</div>

Это уродливо, но делает то, что мне нужно. Спасибо @developer033 за то, что указал мне правильное направление. В следующий раз я буду использовать пользовательскую директиву для всего этого бесполезного кода.

person OGZCoder    schedule 22.07.2016