角和CSS：如何水平導航欄改爲垂直按鈕點擊

我想用我的angularJs水平導航欄更改爲垂直按鈕點擊... 我試圖申請NG-風格和NG-單擊但不能達到想要的我想......這是我的code..so遠角和CSS：如何水平導航欄改爲垂直按鈕點擊

<li> <a href="#"><button **ng-click="change={trasform:'rotate(90deg)'}"**>change</button> 
</a></li> 

<nav class="navbar navbar-toggleable-sm navbar-default navbar-light bg-navigation" role="navigation" **ng-style="change"** style="margin-top:7px;border: solid;border-width: 3px; border-color:blue; color: indigo">

來源

2017-06-16 PrachiThakkar

\t 
 

 
<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body> 
 

 
<li> <a href='#'> <button id="changeVertical">change</button> 
 
</a> 
 
</li> 
 
<nav class="navbar navbar-toggleable-sm navbar-default navbar-light bg-navigation" role="navigation" id="Navbar" > 
 
</nav> 
 
</body> 
 
<script> 
 
$("#changeVertical").click(function(){ 
 
    $("nav").css("transform", "rotate(90deg)"); 
 
}); 
 
</script> 
 
</html>

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<body> 

<li> <a href='#'> <button id="changeVertical">change</button> 
</a> 
</li> 
<nav class="navbar navbar-toggleable-sm navbar-default navbar-light bg-navigation" role="navigation" id="Navbar" > 
</nav> 
</body> 
<script> 
$("#changeVertical").click(function(){ 
    $("nav").css("transform", "rotate(90deg)"); 
}); 
</script> 
</html>

來源

2017-06-16 11:27:21

我認爲我們不應該混'與angularjs jquery' :) – anoop

可我們只是不angularjs和CSS實現？ – PrachiThakkar

沒有角度，你可以使用jQuery並實現它。但沒有CSS代碼，我懷疑它。 :) –

您可以通過做到這一點通過有條件ng-class，只是做了一些布爾標誌true\false按鈕點擊動態應用類。

實例演示：

var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', function MyCtrl($scope) { 
 
    $scope.rotateNow = false; 
 
});

.rotate { 
 
    -webkit-transform: rotate(90deg); 
 
    /* Safari and Chrome */ 
 
    -moz-transform: rotate(90deg); 
 
    /* Firefox */ 
 
    -ms-transform: rotate(90deg); 
 
    /* IE 9 */ 
 
    -o-transform: rotate(90deg); 
 
    /* Opera */ 
 
    transform: rotate(90deg); 
 
} 
 

 
#nav { 
 
    border: 1px solid; 
 
    padding: .5em; 
 
    width: 5em; 
 
    height: 5em; 
 
    transition: .3s all; 
 
    /* rotate gradually instead of instantly */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <br> 
 
    <button ng-click="rotateNow=!rotateNow">Click To Rotate</button> 
 
    <hr> 
 
    <nav id="nav" ng-class="{'rotate':rotateNow}"> 
 
    This will rotate 
 
    </nav> 
 
</div>

來源

2017-06-16 11:28:56 anoop

謝謝..但它這樣做會履行旋轉從水平tovertical導航欄，但如何將內容轉移獲得的功能？ @anoop – PrachiThakkar

– PrachiThakkar

爲了對準由CSS的內容，將使得圖更復雜，可能將打破響應性質也一樣，所以我建議創建'2個獨立的導航欄（horizontall和中古立式）'然後顯示\隱藏了一些條件。（是這樣的：'NG-IF =「showVerical」'） – anoop

角和CSS：如何水平導航欄改爲垂直按鈕點擊

回答

相關問題