Question

我正试图通过Angular的ng-Click＆amp; amp; ng-Class选择器。

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

我尝试了多种解决方案，但实际上没有一种能够正常工作。我不完全确定它是否与Angular，或者我的CSS有关？

角：

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 /按钮。除了一个名为state的对象外，它会将状态设置为false：

    $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>

最后你需要一个函数来搜索你的toggles数组中的div名称并返回该对象的.state，这实际上会触发你的类：

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

瞧，就是这样，如果你有任何问题让我知道，这里是小提琴，所以你可以玩它：https://jsfiddle.net/pegla/mvprL5ap/1/

通过Angular切换2个类

1 个答案: