Очистить поля ввода при установке флажка

у меня есть флажок и два поля ввода. Необходимо либо установить флажок, либо заполнить два поля ввода. Я делаю проверку, используя Angular, т. е. ng-show, ng-required.

когда флажок установлен, два поля ввода отключены, т. е. ng-disabled= " $parent.виртуальная память.selectAllDates".

теперь я также должен очистить любые данные, которые могут быть введены в текстовые поля.

флажок не установлен при загрузке страницы. Это набор в контроллере, как это: vm.selectAllDates = false;

есть ли способ очистить поля ввода, когда флажок установлен в Angular?

изменить Я добавил, что я пытался сделать, используя Ваш пример

флажок:

<input name="dateSelectAll" type="checkbox" 
           ng-model="$parent.vm.selectAllDates" 
           ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates

ввод даты начала:

 <input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
           ng-disabled="$parent.vm.selectAllDates"
           ng-model="$parent.vm.selectedReport.Parameters.StartDate"
           is-open="beginningDateOpened"
           ng-required="$parent.vm.selectAllDates == false"
           ng-change="$parent.vm.selectedReport.Parameters.StartDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.StartDate"
           close-text="Close" />

дата окончания:

 <input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
           ng-disabled="$parent.vm.selectAllDates"
           ng-model="$parent.vm.selectedReport.Parameters.EndDate"
           is-open="endDateOpened" ng-change="$parent.vm.selectedReport.Parameters.EndDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.EndDate"
           ng-required="$parent.vm.selectAllDates == false && $parent.vm.selectedReport.Parameters.EndDate == null"
           close-text="Close" />

одна действительно странная вещь, я хотел увидеть, что происходит, поэтому я добавил 

{{$parent.vm.selectedReport.Parameters.StartDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.StartDate}}

после поля ввода StartDate. Когда я выбрал дату, дата была добавлена в поле ввода,а также под входом. Когда я щелкнул флажок, дата была удалена из поля ввода, а также из-под поля ввода. Так это сработало! Но в ту минуту, когда я удалил вышеуказанный код из-под поля ввода, он перестал работать...Я был как что?

7
angularjs checkbox checked clear input

2 ответов

простой подход заключается в использовании ngChange директива на флажке и установите модель ввода текста в пустую строку, если флажок установлен. Что-то вроде этого:--3--> 

<input type="text" ng-model="data.test" ng-disabled="data.check">

<input type="checkbox" ng-model="data.check" value="one"
            ng-change="data.test = data.check ? '' : data.test">

демо: http://plnkr.co/edit/pKGui2LkP487jP0wOfHf?p=preview

13

Я закончил строить из того, что вы показали мне @dfsq. Большое спасибо за помощь! В итоге я создал функцию для ng-change и поставил ее на флажок:

<input name="dateSelectAll" type="checkbox"
           ng-model="$parent.vm.selectAllDates"
           ng-change="vm.clearFields()"
           ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates

затем в моем контроллере я добавил код, чтобы очистить поля ввода даты начала и окончания:

vm.clearFields = function () {
            vm.selectedReport.Parameters.StartDate = vm.selectAllDates ? '' : vm.selectedReport.Parameters.StartDate;
            vm.selectedReport.Parameters.EndDate = vm.selectAllDates ? '' : vm.selectedReport.Parameters.EndDate;
        }

Если есть лучший способ, пожалуйста, дайте мне знать. Еще раз спасибо!

0