Question

我想使用angularJs将按钮单击时水平导航栏更改为垂直... 我尝试应用ng-style和ng-click但是无法实现我想要的...这是我的代码..到目前为止

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

Answer 1

＆＃13;

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

＆＃13;

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

Answer 2

您可以通过条件css通过ng-class执行此操作，只需在按钮上单击一些布尔标记true\false即可动态应用类。

示例演示：

＆＃13;

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

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Angular＆amp; CSS：如何在按钮单击时将水平导航栏更改为垂直

2 个答案: