AngularJs 更改按钮文本和颜色答案

【问题标题】：AngularJs change button text as well as colorAngularJs 更改按钮文本和颜色
【发布时间】：2016-06-05 15:28:37
【问题描述】：

您好，我正在尝试更改按钮的颜色和文本，即在两种文本和颜色之间切换。暂停/取消暂停文本和红色/绿色。

我现在想做的是（因为稍后，服务器会提供有关用户是否被暂停的信息）随机给他们这两种文本和颜色中的任何一种，然后我点击按钮它应该变成其他文本&颜色。

我试过了，但我在某个地方错了，我找不到它。请帮忙。如果有更好的方法，请给我建议，我是 angular 新手。

HTML：

<button type="button" class="btn btn-danger" ng-if="checkStatus(person.isSuspended)" ng-click="person.isSuspend=suspendUser(!person.isSuspend)">{{suspendText}}</button>
<button type="button" class="btn btn-primary" ng-if="checkStatus(!person.isSuspended)" ng-click="person.isSuspend=suspendUser(person.isSuspend)">{{suspendText}}</button>

Javascript：

$scope.checkStatus = function (bool) {
        if (bool) {
            $scope.suspendText = "UNSUSPEND"
            return true;
        } else {
            $scope.suspendText = "SUSPEND"
            return false;
        }
    }
    $scope.suspendUser = function (bool) {

        if (bool) {
            if ($window.confirm("Are You Sure Want to Unsuspend ?")) {
                $scope.suspendText = "SUSPEND"
                return !bool;
            }
            else {

                return bool;
            }
        } else {
            if ($window.confirm("Are You Sure Want to Suspend ?")) {
                $scope.suspendText = "UNSUSPEND"
                return !bool;
            } else {

                return bool;
            }
        }
    }

【问题讨论】：

标签： angularjs

【解决方案1】：

检查这个 Plunkr：http://plnkr.co/edit/DEbTtpwu749sVT6iSojd?p=preview

假设您正在通过具有名称和状态的用户列表（布尔值 true：活动 - false：非活动）：

user = {name:'John', status: true}

您可以在此处查看如何更改状态、文本和按钮颜色。以短角方式。

<li ng-repeat="user in users">
  ({{ user.active ? 'Active' : 'Inactive'}})
  {{ user.name }} 
  <div ng-class="user.active? 'btn btn-danger' : 'btn btn-primary' " ng-click="user.active=!user.active">
    {{ user.active ? 'Suspend' : 'Unsuspend'}}
  </div>
</li>

【讨论】：

【解决方案2】：

<body ng-controller="MainCtrl as vm">
  <button class="btn"  
          ng-class="{ 'btn-primary': vm.isSuspended , 'btn-danger': !vm.isSuspended }"
          ng-bind="vm.text"
          ng-click="vm.toggleSuspend()">
  </button>
</body>

angular.module('app', [])
  .controller('MainCtrl', function() {
    var vm = this;

    vm.toggleSuspend = function() {
      vm.isSuspended = !vm.isSuspended;
      vm.text = vm.isSuspended ? 'unsuspend' : 'suspend';
    };

    vm.isSuspended = true;
    vm.toggleSuspend();
});

【讨论】：

【解决方案3】：

您只需要一个button 而不是两个。显示颜色的更好方法是使用ng-class，您可以在其中编写表达式来切换类。

<button type="button" class="btn" ng-class="person.isSuspended? 'btn-danger':'btn-success'" ng-click="person.isSuspended = !person.isSuspended">{{suspendText}}</button>

注意ng-class 的书写方式。我正在使用三元运算符来检查person.isSuspeneded 是否为真，如果是，则应用btn-danger 类，否则应用btn-success。现在你有了更简洁的代码。

附件是 plnkr - http://plnkr.co/edit/Uk2rHFacMFLbXyxGzK1b?p=preview

【讨论】：

【解决方案4】：

尝试在按钮中用 ng-show 替换您的 ng-if。

<div ng-controller="MyCtrl">
 <button type="button" class="btn btn-danger" 
   ng-show="person.isSuspend" 
   ng-click="person.isSuspend=suspendUser(!person.isSuspend)">{{suspendText}}</button>
 <button type="button" class="btn btn-primary" 
   ng-show="!person.isSuspend" 
   ng-click="person.isSuspend=suspendUser(person.isSuspend)">{{suspendText}}</button> 
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $window) {

// first you need to initialize your scope if you didn't
$scope.person = {
    isSuspend: false
};
$scope.suspendText = "SUSPEND";
$scope.suspendUser = function (bool) {
    if (bool) {
        if ($window.confirm("Are You Sure Want to Unsuspend ?")) {
            $scope.suspendText = "SUSPEND"
            $scope.person.isSuspended = false;
        }
        else {
            $scope.person.isSuspended = true;
        }
    } else {
        if ($window.confirm("Are You Sure Want to Suspend ?")) {
            $scope.suspendText = "UNSUSPEND"
            $scope.person.isSuspended = true;
        } else {
            $scope.person.isSuspended = false;
        }
    }
}       

}

angular change button text

【讨论】：