html - 通过 Angular 切换 2 个类

Question

我正在尝试通过 Angular 的 ng-Click 和 ng-Class 选择器在两个类之间切换。

基本上，我想单击 1 行文本、按钮或其他任何内容，然后通过使用 ng-Click 切换样式来更改元素的 z-index。

我尝试了多种解决方案，但几乎没有一个有效。我不完全确定是我在使用 Angular 还是我的 CSS 做错了什么？

Angular :

app.controller("naviController",function($scope){
    "use strict";
$scope.toggles = [{ state: true }, { state: false }, { state: true }]; 
});

HTML:

    <div  ng-controller="naviController">
<div class="nav-container">
    <div class="nav-element-block ne-1" ng-click="toggle.state = !toggle.state">Index</div>
    <div class="nav-element-block ne-2" ng-click="toggle.state = !toggle.state">About</div>
    <div class="nav-element-block ne-3" ng-click="toggle.state = !toggle.state">Dev</div>
</div>

<div id="index-container" ng-class="{'about-container-active' : toggle.state}">Index Container</div>
<div id="about-container" ng-class="{'about-container-active' : toggle.state}">About Container</div>
<div id="dev-container" ng-class="{'about-container-active' : toggle.state}">Dev Container</div>

</div>

CSS:

#index-container {
    display: table-cell;
    width: 100vw;
    height: 90vh;
    padding-top: 10vh;
    background-color: #FFF;
    overflow: hidden;
    animation-name: indexcell;
    animation-duration: 500ms;
    box-sizing: border-box;
    padding-left: 5%;
    padding-right: 5%;
        z-index: 5;
    position: fixed;
    }
.index-container-active {
    z-index: 999;
}
#about-container {
    display: table-cell;
    width: 100vw;
    height: 90vh;
    padding-top: 10vh;
    background-color: #f1ffff;
    overflow: hidden;
    animation-name: indexcell;
    animation-duration: 500ms;
    padding-left: 5%;
    padding-right: 5%;
    z-index: 4;
    position: fixed;

    }
.about-container-active {
    z-index: 999;
}
#dev-container {
    display: table-cell;
    width: 100vw;
    height: 90vh;
    padding-top: 10vh;
    background-color: #f1fff1;
    overflow: hidden;
    animation-name: indexcell;
    animation-duration: 500ms;
    padding-left: 5%;
    padding-right: 5%;
    z-index: 3;
    position: fixed;

    }
.dev-container-active {
    z-index: 999;
}

我实际上想做的是:我有 5 个 div，我想更改它们的类，比方说 5 个链接，当我单击其中一个链接时，我想打开相关类，并且其他人关闭。喜欢:

Index = Class-1-Active
About = Class-2-Inactive
Dev = Class-3-Inactive
Contact = Class-4-Inactive
Portfolio = Class-5-Inactive

假设我们点击“Dev”，然后通过切换类将第 3 类切换到事件状态，然后将所有其他类切换到非事件状态。像这样:

Index = Class-1-Inactive
About = Class-2-Inactive
Dev = Class-3-Active
Contact = Class-4-Inactive
Portfolio = Class-5-Inactive

Answer 1

您的代码中有多个错误，因为有人指出您有打字错误，但这并不能解决您的问题。

我会从头开始，因为 angularjs 中的所有内容都有很多方法可以做同样的事情。这只是一个简单的建议，首先你的 html 需要 ng-click 进入某种功能，你将在其中更改事件状态:

<button class="nav-element-block ne-1" ng-click="toggleState('index')">Index</button>
<button class="nav-element-block ne-2" ng-click="toggleState('about')">About</button>
<button class="nav-element-block ne-3" ng-click="toggleState('dev')">Dev</button>

接下来你需要弄清楚哪个状态是哪个状态，所以将你的状态对象固定为这样的东西:

let toggles = [{
    name: 'dev',
    state: false
  }, {
    name: 'about',
    state: false
  }, {
    name: 'index',
    state: true
  }];

并且您需要在 $scope 上创建您在单击该 div/按钮时调用的函数。它会将所有其他对象的状态设置为 false，除了一个名为 state 的对象:

    $scope.toggleState = function(state) {
    toggles = toggles.map(val => {
      if (val.name === state) {
        val.state = true;
      } else {
        val.state = false;
      }
      return val;
    });
  };

然后您需要分配函数来检查您的 div 以通过特定的 div 名称触发类:

<div id="index-container" ng-class="{'about-container-active' : checkActiveState('index')}">Index Container</div>
<div id="about-container" ng-class="{'about-container-active' : checkActiveState('about')}">About Container</div>
<div id="dev-container" ng-class="{'about-container-active' : checkActiveState('dev')}">Dev Container</div>

最后，您需要一个函数来在您的切换数组中搜索该 div 名称并返回该对象的 .state 并且这将实际触发您的类:

$scope.checkActiveState = function(state) {
    return toggles.find(x => x.name === state).state;
  };

瞧，就是这样，如果您有任何问题请告诉我，这是 fiddle ，您可以使用它:https://jsfiddle.net/pegla/mvprL5ap/1/