AngularJS Templates | Web AngularJS Design with repeater

Angular Js Templaes AngularJs Templates For Web Designer: How can fetch Data from Database (Sql Server) and use into Repeater .


<!DOCTYPE html>
<html lang=en ng-app=serviceConsumer>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Dicount Offers</title>
<link rel=stylesheet href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel=stylesheet href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<style>.shape{border-style:solid;border-width:0 70px 40px 0;float:right;height:0px;width:0px;-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg);}
.offer{background:#fff;border:1px solid #ddd;box-shadow:0 10px 20px rgba(0, 0, 0, 0.2);margin:15px 0;overflow:hidden;}
.offer1:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:rotate scale(1.1);-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;}
.shape{border-color:rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);}
.offer-radius{border-radius:7px;}
.offer-danger{border-color:#d9534f;}
.offer-danger .shape{border-color:transparent #d9534f transparent transparent;}
.offer-success{border-color:#5cb85c;}
.offer-success .shape{border-color:transparent #5cb85c transparent transparent;}
.offer-default{border-color:#999999;}
.offer-default .shape{border-color:transparent #999999 transparent transparent;}
.offer-primary{border-color:#428bca;}
.offer-primary .shape{border-color:transparent #428bca transparent transparent;}
.offer-info{border-color:#5bc0de;}
.offer-info .shape{border-color:transparent #5bc0de transparent transparent;}
.offer-warning{border-color:#f0ad4e;}
.offer-warning .shape{border-color:transparent #f0ad4e transparent transparent;}
.shape-text{color:#fff;font-size:12px;font-weight:bold;position:relative;right:-40px;top:2px;white-space:nowrap;-ms-transform:rotate(30deg);-o-transform:rotate(360deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
.offer-content{padding:0 20px 10px;}
@media (min-width:487px){.container{max-width:750px;}
.col-sm-6{width:50%;}
}
@media (min-width:900px){.container{max-width:970px;}
.col-md-4{width:33.33333333333333%;}
}
@media (min-width:1200px){.container{max-width:1170px;}
.col-lg-3{width:25%;}
}
}</style>
</head>
<body>
<div>
<div class=container>
search:<input ng-model=search class=form-control />
<div class=row ng-controller=questionsController>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" ng-repeat="i in questions | filter:search">
<div class="offer offer-radius offer-primary">
<div class=shape>
<div class=shape-text>
FREE
</div>
</div>
<div class=offer-content>
<p>
10% Off on Mobile On flipcart ! Offer For LImited Period
<div class=row>
<div class=col-md-4>
<a href="http://www.grideb.com" target=_blank class="btn btn-info btn-xs"> Buy Now </a>
</div>
<div class="col-md-6 push-right text-right">
<a class="" data-toggle=modal data-target="#{{i.index_id}}">
<img src="http://www.grideb.com/images/grideb-logo.png" alt="" class=img-responsive />
</a>
</div>
<div class="modal fade" id="{{i.index_id}}" tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>
<div class=modal-dialog>
<div class=modal-content>
<div class=modal-header>
<button type=button class=close data-dismiss=modal><span aria-hidden=true>×</span><span class=sr-only>Close</span></button>
<h4 class=modal-title id=myModalLabel>Term & Condition </h4>
</div>
<div class=modal-body>
Sign up and get Rs.50 Paytm cash on listing your first ride at Tripda.<br>
Cannot be clubbed with any other offer.
Valid only on listings done via link shared on your registered email address.<br>
Use your Paytm's registered email address and phone number for signing up at Tripda to get Paytm cash.<br>
Rs.50 Paytm cash will be credited into your Paytm Wallet within 48-72 hours of availing the service.<br>
Valid till 15th December 2014.<br>
</div>
<div class=modal-footer>
<button type=button class="btn btn-default" data-dismiss=modal>Close</button>
</div>
</div>
</div>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>var app=angular.module('serviceConsumer',[]);app.controller('questionsController',function($scope,$http){var url="http://grideb.com/anantharts/WebService.asmx/HelloWorld";$http.get(url).success(function(data){var myjson=JSON.parse(data);$scope.questions=JSON.parse(myjson);})})</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>


Share on facebook Google Twitter

Web Engineers here !


Grideb is the group of engineers who provide excellent solution for domain scenario with experienced, talented and high skilled engineers. We work hard to reduce complication of user interface and improve better quality of service.

-- Chief Executive Officer, GRIDEB SERVICES


www.grideb.com

Contact Us

GRIDEB SERVICES
Office-1,FF ,One Square Office Mall
Shaktikhand-III,Indirapuram,Ghaziabad
Uttar Pradesh 201004 (INDIA)
P: +91 (120) 260-6044
M: +91 90-1300-3421
Email ID
info@grideb.com




Grideb Services 2013-2014