CSS Sidebar, Ng-click defining selected events

This small essay, record the wording of the sidebar and Ng-click click on the selected event. Because this project does not allow jquery to be quoted. So the Ng-click selected event was implemented in a rather clumsy way.

Here is the HTML page

Press CTRL + C to copy the code<textarea style="width: 657px; height: 600px; font-family: Courier New; font-size: 12px; line-height: 1.5;"></textarea>Press CTRL + C to copy the code

CSS part of the introduction of angular inside of the bootstrap, it and bootstrap official website inside or a little difference, you can go directly to the ANGULARJS official website to download.

There are CSS styles that you write yourself. At the same time, Angular.min.js was introduced. Because the project also requires the use of nested routines, so the introduction of Ui-router.js.

There is also the app.js of their own writing. JS sequence in accordance with my structure to introduce the line.

Here's the sidebar CSS style:

/*Siderbar STYLE*/. siderbar{Background-color:#3b3934;Border-right:1px solid #2a251c;PositionFixedLeft0px;Margin-top:0px;Height100%;Width80px;}. Siderbar hr{Border0;Background-color:RGBA (255,255,255,0.08);Height1px;}. sider-btn{Width80px;Height80px;Padding10%;Margin-top:2px;}. sider-btn p{ColorRGBA (255,255,255,0.5);font-size: 10px; margin-top: 6px;}  /* Siderbar ACTIVE */. sider-btn:active,.sider-btn.active { background-color: rgba (0,0,0,0.2) ; !important; Border-radius: 0; outline: 0; -webkit-box-shadow: inset 0 0px 0px rgba (0, 0, 0, .125); Box-shadow: inset 0 0px 0px rgba (0, 0, 0,.);}          

The following picture is run:

Well, forget to say Ng-click event, if you follow the above operation, found that the click event No More ~ ~ ~

 <AHref=""Class= "Sider-btn btn btn-lg {clickStyle2}}"Ng-click= "Click2 ()"  Style= " Color:rgba (255,255,255,0.8) "> <span class= "Glyphicon glyphicon-plus"  Style= "margin-top:8px" ></span> <p> design </p> Span style= "color: #0000ff;" ></a>       

I added {{clickStyle2}} and Ng-click= "Click2 ()" To the class of the <a> tag.

At the same time I app.js made some statements, specifically as follows

var MyApp = angular.module ("MyApp", [' Ui.router ']); Myapp.config (function($stateProvider, $urlRouterProvider) {$urlRouterProvider. When ("", "/Home"); $stateProvider. State ("Home"), {URL: '/home ', Templateurl: "home.html"});});//Use Clickstyle siderbar clickmyapp.controller ("Myindexcontroller",function($scope) {$scope. ClickStyle1 = "Active"; $scope. Click1 =function() {$scope. ClickStyle2 = $scope. ClickStyle3 = $scope. clickstyle4= $scope. ClickStyle5 = ""; $scope. ClickStyle1 = "Active"; } $scope. Click2 =function() {$scope. ClickStyle1 = $scope. ClickStyle3 = $scope. clickstyle4= $scope. ClickStyle5 = "" function () {$scope. ClickStyle2 = $scope. ClickStyle1 = $scope. clickstyle4= $ Scope.clickstyle5 = "; $scope. ClickStyle3 = "Active"  () {$scope. ClickStyle2 = $scope. ClickStyle3 = $scope. clickstyle1= $ Scope.clickstyle5 = "; $scope. clickStyle4 = "Active"  () {$scope. ClickStyle2 = $scope. ClickStyle3 = $scope. clickstyle4= $ Scope.clickstyle1 = "; $scope. clickStyle5 = "Active"         

JS above is mainly used for nested routines, you can ignore. My side is mostly because there's a declaration in my click event, MyApp.

Nested routines by this quickly waiting for me to write out, in and everyone to share.

CSS Sidebar, Ng-click defining selected events