AngularJS Tutorial For Beginners: ng-click event

create index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ng-click event</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
 <style>
*{
 margin:0;
 padding:0;
}

body{
 font:15px/1.3 'Open Sans', sans-serif;
 color: #5e5b64;
 text-align:center;
 background:#333333;
}

a, a:visited {
 outline:none;
 color:#389dc1;
 
}

a:hover{
 text-decoration:none;
}

section, footer, header, aside, nav{
 display: block;
}

/*--------------------------------------Box-thumbal----------------------------------------*/
.mybox{
float:left;
background:#CCCCCC;
text-align:center;
margin:10px;
width: 200px;
}
.mybox img{
width:100%;
zoom:1;
}

/*-------------------------
 The menu
--------------------------*/

nav{
 display:inline-block;
 margin:60px auto 45px;
 background-color:#5597b4;
 box-shadow:0 1px 1px #ccc;
 border-radius:2px;
}

nav a{
 display:inline-block;
 padding: 18px 30px;
 color:#fff !important;
 font-weight:bold;
 font-size:16px;
 text-decoration:none !important;
 line-height:1;
 text-transform: uppercase;
 background-color:transparent;

-webkit-transition:background-color 0.25s;
 -moz-transition:background-color 0.25s;
 transition:background-color 0.25s;
}

nav a:first-child{
 border-radius:2px 0 0 2px;
}

nav a:last-child{
 border-radius:0 2px 2px 0;
}

nav.product1 .product1,
nav.product2 .product2,
nav.product3 .product3,
nav.product4 .product4{
 background-color:#e35885;
 display:block;
 height:100%;
}

p{
 font-size:22px;
 font-weight:bold;
 color:#7d9098;
}
p:before{
content:":)";
}

p b{
 color:#ffffff;
 display:inline-block;
 padding:5px 10px;
 background-color:#c4d7e0;
 border-radius:2px;
 text-transform:uppercase;
 font-size:18px;
}
 </style>

</head>

<div id="main" ng-app>

<div class="mybox">
<img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" width="100" height="100">
<a href="#" class="product1" ng-click="active='product1'">product1</a>
</div>

<div class="mybox">
<img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" width="100" height="100">
<a href="#" class="product2" ng-click="active='product2'">product2</a>
</div>

<div class="mybox">
<img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" width="100" height="100">
<a href="#" class="product3" ng-click="active='product3'">product3</a>
</div>

<div class="mybox">
<img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" width="100" height="100">
<a href="#" class="product4" ng-click="active='product4'">product4</a>
</div>
 </nav>

<p ng-hide="active">You have Selected</p>
 <p ng-show="active">You have Selected <b>{{active}}</b></p>
   
</div>

Wednesday, 15 April 2015

ng-click event

create index.html

No comments:

Post a Comment