Question

此按钮正常工作，直到我添加了切换功能，可以将切换作为提交信息的按钮。它应该改变页面的颜色。有任何想法吗？我已经离开了上一个工作按钮，但对其进行了评论。

.hg { background-color: #5B3768; }
.hg h1 { color: #fff; }
.hg h2 { color: #fff; }
.hg h3 { color: #fff; }
.hg h4 { color: #fff; }
.hg h5 { color: #fff; }
.hg h6 { color: #fff; }
.hg p { color: #fff; }
.hg th {background: #fff; color: #5B3768;}
.hg tr {color: #fff;}

.Normal { background-color: #fff; }
.Normal h1 { color: #000; }
.Normal h2 { color: #000; }
.Normal h3 { color: #000; }
.Normal h4 { color: #000; }
.Normal h5 { color: #000; }
.Normal h6 { color: #000; }
.Normal p { color: #000; }
.Normal th {background: #ff9500; color: #fff;}
.Normal tr {color: #000;}

<div>    
   <!-- <button class="btn btn-info" ng-click="colorScheme = 'hg'">Hg Theme</button> -->
    <button toggle-button ng-model="eventData.themehg">
        <span ng-show="eventData.themehg" ng-click="colorScheme = 'hg'">HG Theme</span>
        <span ng-hide="eventData.themehg" ng-click="colorScheme = 'Normal'">HG Theme Disable</span>
    </button>

这种方式有点，它不会改变颜色，但会添加启用禁用

Answer 1

我建议创建一个schemeSwitcher函数来进行实际切换：

    $scope.toggleScheme = function (sheme) {
        switch (sheme) {
            case 'hg': $scope.colorScheme = 'hg';
                break;
            case 'hg-disabled': $scope.colorScheme = 'Normal';
                break;
        }
    };

然后在ng-click中的HTML中调用该函数：

<button type="button" ng-click="toggleScheme('hg')">HG Theme</button>
<button type="button" ng-click="toggleScheme('hg-disabled')">HG Theme Disable</button>

演示：http://jsfiddle.net/cg8gy13j/3/

按钮不切换颜色

1 个答案: