Question

您好我正在尝试更改颜色以及按钮文本，即在两个文本之间切换＆amp;颜色。暂停/取消暂停文本和红/绿色。

我想要做的是暂时（因为稍后，服务器将提供有关用户是否被暂停的信息）随机给他们这两个文本和颜色中的任何一个，我点击按钮它应该转向其他文字＆amp;颜色。

我试过，但我错了，我无法找到它。请帮忙。如果有更好的方法，那么请向我建议，我是棱角分明的新人。

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

Answer 1

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

通过名称＆amp; status（布尔值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>

Answer 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();
});

Answer 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

Answer 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

AngularJs更改按钮文本以及颜色

4 个答案: