Question

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

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

注意：变量$ scope.temabar以＆＃34;离子色阳性＆＃34;开头。（$scope.temabar = 'positive';）并在按钮＆＃34; CHANGE COLOR＆＃34;点击。

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

Answer 1

Well you code pen does not work so I can't tell you what is wrong but if you want to change classes dynamically I would simply use ng-class directive. It is simple, easy, fast, and works. If you are already using ng-class please fix the codepen and I will update my answer :D https://docs.angularjs.org/api/ng/directive/ngClass

and an example:

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) {

});

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

1 个答案: