更改颜色按钮并设置文本Angular js [英] change color button and set text Angular js

问题描述

我尝试尝试，但没有成功，这是我的按钮

i try and try but no success this my button

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

我的目标是将此按钮与此功能连接停用并激活用户

and my objective is to connect this button with this function desactivate and activate user

  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.";
    }

如果按钮为绿色，则功能如下所示

if the button is green then the function be like this

        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.";
    }

我如何打开我的问题:图片 :在此处输入图片描述

how i can open my problemm : images : enter image description here

推荐答案

我个人认为使用锚标记比使用 input type ="button" 更容易.您将有更多的自由来随意设置样式和更改内容，并且 ng-click 是单击时发生的事情，它们都扮演相同的角色.

Personally, I find it easier to use anchor tags rather than input type="button". You'll have more liberty to style and change things as you like and with the ng-click being what happens on a click they both fill the same role.

大概您的用户对象本身具有详细说明它们是活动还是非活动的属性.

Presumably your user objects themselves have a property detailing whether or not they are active or deactive.

对于您的班级，您可以将其替换为 ng-class ="{btn:true; btn-danger:！User.active; btn-success:User.active}"

For your class, you can replace it with ng-class="{btn: true; btn-danger: !User.active; btn-success: User.active}"

这等效于在User.active为false的情况下将类设为"btn btn-danger" ，在情况下将其设为"btn btn-success" User.active 是 true ，并且会随着用户属性的更改而更改.由于 btn-danger 显示为红色，因此我假设您具有Bootstrap CSS或类似的代码，因此 btn-success 使其显示为绿色.如果没有，只需修改自己的CSS即可.

This is equivalent to having your classes be "btn btn-danger" in the case that User.active is false and "btn btn-success" in the case that User.active is true and will change as the property on the user changes. Since btn-danger is appearing red, I assume you have bootstrap css or similar so btn-success makes it look green. If not, just modify your own css to match.

接下来，在您的http帖子的 .then 里面，查看您的响应并检查它是否为200，并且后端成功激活了您的用户，此时只需设置User.active = true .您想确保自己确实想通过收听响应来想要来更新用户对象.否则，通过侦听响应并查看是否存在错误，可以使用 .then 以便向用户显示适当的错误消息.

Next, inside of your .then for your http post, look at your response and check that it was a 200 and the back-end successfully activated your user at which point just set User.active=true. You want to ensure that you actually want to update your user object by listening to the response. Otherwise, by listening to the response and seeing that there was an error, you can use the .then in order to display an appropriate error message to the user.

至于更改按钮上的文本，您也可以使用angular来做到这一点.只需将锚点内的文本设置为 {{User.active?'Deactivate':'Activate'}}

As for changing the text on the button, you can use angular to do that as well. Just let the text inside of the anchor be {{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>

这篇关于更改颜色按钮并设置文本Angular js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！