javascript - AngularJS - 尝试使用 ng-switch 和 ng-click 改变背景颜色

标签 javascript html angularjs

这是我的第一个问题 - 它实际上更令人沮丧。我已经经历了大约 12 个不同的堆栈溢出问题,这些问题相似并复制了它们的代码,但我仍然无法在单击时更改该死的背景颜色。所以我假设我遗漏了一些东西。

https://codepen.io/Dawsraki/pen/XRGBLW

<html ng-app="app"> 
    <head>
      <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
    </head>
<body ng-controller="SwitchController" ng-style="myStyle">
  <div ng-switch="slider.page" class="screen" >
  <div  id="record_player" ng-switch-when="1">
    <span><a href="#"  ng-click="slider.page=1; myStyle={background:'#2a1f2d;'}">&#60;</a></span>
    <div class="rectangle">
      <div class="circle1">      
          <div class="circle3">
          </div>     
      </div>
      <div class="handle"> 
        <div class="circle1">
        </div>
        <div class="hand">
        </div>
        <div class="arm">
        </div>
      </div>
      <div class="toggles">
        <div class="left_dash"></div>
        <div class="right_dash"></div>
      </div>
    </div>
    <h1>Listen to Music</h1>
    <span><a href="#" ng-click="slider.page=2">&#62;</a></span>
  </div>
  <div id="cassette" ng-switch-when="2">
     <span><a href="#" ng-click="slider.page=1; myStyle={background:'#5F78D2'}">&#60;</a></span>
    <div class="rectangle">
      <div class="circle1">
      </div>
      <div class="line1">
      </div>
      <div class="line2">
      </div>
      <div class="line3">
      </div>
      <div class="line4">
      </div>     
      <div class="circle2">
      </div>
    </div>
    <h1>Share it with friends</h1>
    <span><a href="#" ng-click="slider.page=1">&#62;</a></span>
  </div>
  </div>
</div>
  </body>
</html>

这是我的代码笔 - 我希望在单击箭头时更改背景颜色,我见过很多简单的解决方案,但它们就是不起作用,我也不知道为什么。如果有人想帮助 AngularJS 新手,将会有很多爱和 cookies <3(免责声明:不会提供 cookies )

最佳答案

这个问题是由于 ng-switch 造成的,因为它创建了自己的作用域。

在 anchor 标签中使用 $parent.myStyle={background:'red'}"来解决这个问题

关于javascript - AngularJS - 尝试使用 ng-switch 和 ng-click 改变背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44219039/

相关文章:

javascript - 使用 jQuery 一键下载文件

html - 如何绕三 Angular 形 block 流动?

php - 在 html select 标签中维护空白

javascript - Angular - 无限 $digest 循环

angularjs - 用于 Angular Material 的多项目响应轮播

javascript - 如何从 AngularJS 指令中选择动态生成的元素?

javascript - 渐进增强——不使用 CSS 隐藏元素

javascript - 我的下面的 JavaScript 代码有什么问题?

javascript - 如何在新元素中显示文本翻译

javascript - JQuery toggleClass() 打开然后关闭(或删除)