通過Angular切換2個課程

Question

我想通過Angular的ng-Click & ng-Class選擇器切換2個課程。

基本上，我想點擊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個格，其班級，我想改變，讓我們說5個鏈接，當我點擊其中一個鏈接時，我想切換相關的類，其他的關閉。像：

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

比方說，我們點擊「開發」，這然後切換類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單擊某種功能，你會改變積極的狀態去：

<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 
    }]; 

，你需要創建您所呼籲該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> 

而在最後，你需要將你的切換陣列搜索該分區的名稱，並返回該對象的.state並且確實會觸發類的函數：

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

瞧，就是這樣，如果你有任何問題讓我知道，這裏的小提琴，所以你可以玩它：https://jsfiddle.net/pegla/mvprL5ap/1/