Лично мне проще использовать теги привязки, чем input type="button"
. У вас будет больше свободы для стилизации и изменения вещей по своему усмотрению, и если ng-click
- это то, что происходит при клике, они оба выполняют одну и ту же роль.
Предположительно, у ваших пользовательских объектов есть свойство, детализирующее, является ли или они не активны или неактивны.
Для вашего класса вы можете заменить его на ng-class="{btn: true; btn-danger: !User.active; btn-success: User.active}"
Это эквивалентно тому, что ваши классы равны "btn btn-danger"
в случае, если User.active false и "btn btn-success"
в случае, если User.active
равно true
и будет изменяться при изменении свойства пользователя. Поскольку btn-danger
выглядит красным, я предполагаю, что у вас есть bootstrap css или подобное, поэтому btn-success
делает его зеленым. Если нет, просто измените свой собственный css, чтобы он соответствовал.
Далее, внутри вашего .then
для вашего сообщения http, посмотрите свой ответ и убедитесь, что это был 200, и сервер успешно активирован ваш пользователь в этот момент просто установить User.active=true
. Вы хотите убедиться, что на самом деле хотите обновить свой пользовательский объект, прослушивая ответ. В противном случае, прослушав ответ и увидев, что произошла ошибка, вы можете использовать .then
для отображения пользователю соответствующего сообщения об ошибке.
Что касается изменения текста на кнопке, вы можно использовать angular, чтобы сделать это. Просто пусть текст внутри якоря будет {{User.active?'Deactivate':'Activate'}}
<a ng-class="{btn: true; btn-danger: !User.active; btn-success: User.active}"
ng-click="DesactivateUser(User)">\
{{User.active?'Deactivate':'Activate'}}
</a>