изменить цвет кнопки и установить текст Angular js

Question

Я пытаюсь, но безуспешно, но моя кнопка

<div ng-class="User.active? 'btn btn-danger' : 'btn btn-success' "
     ng-click="User.active=!User.active">
    {{ User.active ? 'Desactive' : 'Active'}}
</div>

, и моя цель - подключить эту кнопку с помощью этой функции, чтобы отключить и активировать пользователя

  public string Deactivate_User(AspNetUser User)
       {
        if (User == null) return "User Not Updated! Try Again";
        var userToUpdate = db.AspNetUsers.FirstOrDefault(x => x.Id == 
  User.Id);
        if (userToUpdate == null) return "User Not Found.";
        if (userToUpdate.IsActive == true)
        {
            userToUpdate.IsActive = false;



        db.SaveChanges();
        return "User successfully deactivated.";
    }


        return "User already deactivated.";
    }

, если кнопка зеленый, тогда функция будет такой:

        public string Activate_User(AspNetUser User)
    {
        if (User == null) return "User Not Updated! Try Again";
        var userToUpdate = db.AspNetUsers.FirstOrDefault(x => x.Id == 
        User.Id);
        if (userToUpdate == null) return "User Not Found.";
        if (userToUpdate.IsActive == false)
        {
            userToUpdate.IsActive = true;



            db.SaveChanges();
            return "User successfully activated.";
        }


        return "User already activated.";
    }

как я могу открыть свою проблему: images: введите описание изображения здесь

Answer 1

Лично мне проще использовать теги привязки, чем 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>