Угловой способ настройки поля динамического ввода?

Question

Предположим, что есть текстовое поле ввода, в которое пользователь вводит идентификатор. После этого пользователь сможет нажать кнопку «Добавить» для подтверждения. Как только эта кнопка нажата, я хочу отправить отправку запроса на мой сервер и получить «имя». Затем я хочу отключить текстовое поле ввода, скрыть кнопку «добавить» и отобразить поле ввода номера, в котором была кнопка «добавить».

Как бы я мог структурировать это по Угловому пути? Я только начал использовать Angular и немного знаком с концепциями, но у меня возникли проблемы с правильной настройкой.

Answer 1

Для этого вы должны использовать ng-show, ng-hide, ng-disabled и ng-click.

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

Вы должны сделать что-то вроде этого:

<input type="text" ng-model="textValue" ng-disabled="numberValue"> 
<button ng-hide="numberValue" ng-click="sendData">Send</button> 
<input type="number" ng-model="numberValue" ng-show="numberValue"> 

В контроллере, вы назовете свой сервер в методе SendData и присвоить результат свойству numberData. Если вы хотите отключить кнопку во время загрузки данных, вы можете добавить второе свойство, которое будет установлено в true, когда вы начнете вызов своего сервера и установите значение false в методе обратного вызова вашего запроса. Затем вы добавляете ng-disabled для этого свойства для кнопки.