Angularjs股利顯示，隱藏與添加類激活鍵

我試圖實現DIV切換和按鈕類添加時點擊按鈕（活動），我看了每一個地方我一直在努力，爲超過6個小時做這個現在:(。

這裏是我的NAV格

<div id="sidebar-wrapper-button" ng-controller="Main"> 
    <ul class="nav nav-pills"> 
     <li ng-click="isInfo = !isInfo" ng-class="{'active':isInfo}"><a href="#" class="glyphicon glyphicon-info-sign"></a></li> 
     <li ng-click="isSetting = !isSetting" ng-class="{'active':isSetting}"><a href="#" class="glyphicon glyphicon glyphicon-cog"></a></li> 
    </ul> 
</div>

內容事業部

<div ng-class="{'ng-show':isSetting,'ng-hide':!isSetting,'ng-hide':isInfo,}"> 
    <h1>Setting</h1> 
</div> 

<div ng-class="{'ng-show':isInfo,'ng-hide':!isInfo,'ng-hide':isSetting}"> 
    <h1>Info</h1> 
</div>

個

app.js

//toggle Setting 
app.controller('Main', function($scope) { 
    $scope.isSetting = false; 
}); 
//toggle Info 
app.controller('Main', function($scope) { 
    $scope.isInfo = false; 
});

謝謝。

來源

2015-09-20 Jah

可能不會改變發生的一個小改變是使用'ng-show ='isSetting''來代替ng-class =「{'ng-show'：isSetting ...與ng-hide相同屬性。 – area28

如果我理解您的要求，這裏的我會做什麼：

var app = angular.module('myApp', []); 
 

 
app.controller('Main', function($scope) { 
 
    $scope.tabActive = null; // here insert 1, 2 or null depending on what the initial selection should be 
 
});

li a{text-decoration: none;}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div class="container" ng-app="myApp"> 
 
    <div ng-controller="Main"> 
 
    <ul class="nav nav-pills"> 
 
     <li ng-click="tabActive = 1" ng-class="{'active':tabActive == 1}"> 
 
     <a href="#" class="fa fa-info"></a> 
 
     </li> 
 
     
 
     <li ng-click="tabActive = 2" ng-class="{'active':tabActive == 2}"> 
 
     <a href="#" class="fa fa-cog"></a> 
 
     </li> 
 
    </ul> 
 

 
    <div ng-show="tabActive == 1"> 
 
     <h1>Info</h1> 
 
    </div> 
 

 
    <div ng-show="tabActive == 2"> 
 
     <h1>Setting</h1> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-09-20 02:17:03 John

更簡單的方法是使用角表達{{}}以輸出相應的字符串：

<h1>{{isSetting ? 'Setting' : 'Info'}}</h1>

需要更少的標記和少類變化邏輯代碼和範圍的最終較少手錶

來源

2015-09-20 01:30:36 charlietfl

Angularjs股利顯示，隱藏與添加類激活鍵

回答

相關問題