IONIC：在sidemenu演示中动态更改颜色-Java 学习之路

我正在编写一个Ionic框架“sidemenu”类型的应用程序（基于sidemenu demo / starter），允许用户选择一个主题（基本上，条形和按钮颜色） . 问题是当用户单击按钮以动态更改主题时，它只会更改菜单 Headers 的颜色而不会更改视图 Headers 的颜色（始终保持在数组的第一种颜色中） . 这是一个codepen示例（只需单击侧面菜单上的“CHANGE COLOR”按钮）：

http://codepen.io/anon/pen/oXqQqm

注意：变量$ scope.temabar以"ionic color positive"（ $scope.temabar = 'positive'; ）开头，并在单击按钮"CHANGE COLOR"时更改 .

谁能告诉我我做错了什么？谢谢

1 回答

那么你的代码笔不起作用所以我不能告诉你什么是错的但是如果你想动态地改变类我只会使用ng-class指令 . 它简单，容易，快速且有效 . 如果你已经在使用ng-class，请修改codepen，我会更新我的答案：D https://docs.angularjs.org/api/ng/directive/ngClass

一个例子：

http://codepen.io/sevilayha/pen/onfrd

HTML：

<div class="container" ng-app="classApp" ng-controller="mainController">

  <div class="page-header">
    <h1>Dynamic Angular Classes <small>String Syntax</small></h1>
  </div>

  <div class="row">
    <div class="col-xs-6">

      <!-- FORM STUFF =========================== -->
      <form>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Type Your Class" ng-model="superClass">
        </div>
      </form>

      <p>Try:</p>
      <ul>
        <li>text-danger</li>
        <li>text-success</li>
        <li>text-danger</li>
        <li>bg-primary</li>
        <li>bg-info</li>
      </ul>
    </div>   
    <div class="col-xs-6">

      <!-- NGCLASS EXAMPLE ============================ -->
      <div class="jumbotron text-center">
        <h2 ng-class="superClass">
          Stuff Stuff
        </h2>
      </div>

    </div>
  </div>

</div>

CSS：

.bubble { 
  animation:pulse 1s infinite; 
  -webkit-animation:pulse 1s infinite;
}

@keyframes pulse {
  0%      { transform:scale(1); }
  25%     { transform:scale(2); }
  75%     { transform:scale(1); }
}
@-webkit-keyframes pulse {
  0%      { -webkit-transform:scale(1); }
  25%     { -webkit-transform:scale(2); }
  75%     { -webkit-transform:scale(1); }
}

JS：

angular.module('classApp', [])

.controller('mainController', function($scope) {

});

回复于 2024-05-09T04:34:11+08:00

IONIC：在sidemenu演示中动态更改颜色

1 回答

相关问题