【问题标题】:ng-switch according to classng-switch 根据类
【发布时间】:2016-04-21 15:44:52
【问题描述】:

我没有完全了解 ng-switch。这就是我想要做的: 我的身体有一个可以根据我单击的按钮进行更改的类。

<body class="green">
      ....
<button onclick="document.body.className='green'">green</button>
<button onclick="document.body.className='blue'">blue</button>

我的想法是我需要通过 ng-include 包含一个文本,我希望它是

<div ng-include="green.html"></div> //if body has class green
<div ng-include="blue.html"></div> //if body has class blue

我知道我可以用 ng-switch 做到这一点,但我不知道怎么做。

你能帮帮我吗?

【问题讨论】:

  • 法比奥,非 è chiaro cosa vuoi ottenere,spiegati meglio... :-)
  • 你可以做ng-include="color == 'green' ? 'green.html': 'blue.html'"
  • 你试过使用它吗?您说您对ng-switch 感到困惑,但您的代码甚至没有显示ng-switch 或您的任何尝试。展示一个不起作用或语法错误的尝试比仅仅说你不理解并期望有人为你写一个解决方案要好....

标签: angularjs ng-switch


【解决方案1】:

我认为你可以使用这个:

<button ng-click="updateBodyClass('green')">green</button>
<button ng-click="updateBodyClass('blue')">blue</button>

<div ng-switch on="bodyClass">
    <div ng-include="green.html" ng-switch-when="green"></div> //if body has class green
    <div ng-include="blue.html" ng-switch-when="blue"></div> //if body has class blue
</div>


//inside your controller
$scope.updateBodyClass = function(color) {
    document.body.className = color;
    $scope.bodyClass = color;
};

【讨论】:

    【解决方案2】:

    试试这个希望它可以工作

    <button ng-click="color='green'">green</button>
    <button ng-click="color='blue'">blue</button>
    
    <div>
        <div ng-include="green.html" ng-if="color==green"></div> //if body has class green
        <div ng-include="blue.html" ng-if="color==blue"></div> //if body has class blue
    </div>
    

    【讨论】:

      【解决方案3】:

      更短的版本:

      <button ng-click="flag='green'">green</button>
      <button ng-click="flag='blue'">blue</button>
      
      <div ng-switch on="flag">
          <div ng-include="green.html" ng-switch-when="green"></div> 
          <div ng-include="blue.html" ng-switch-when="blue"></div> 
      </div>
      

      希望对你有帮助。

      【讨论】:

        猜你喜欢
        • 2015-10-12
        • 2014-06-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-04-01
        • 2017-03-27
        • 2013-03-13
        相关资源
        最近更新 更多