HTML
<html ng-app="fetch">
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="listproduct.css">
<!-- jQuery library -->
<script src="jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="bootstrap.min.js"></script>
<script src="angular.min.js"></script>
<script src="angularscript.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Ladies Boutique</a>
</div>
</div>
</nav>
<div class="container">
<div class="row " ng-controller="dbCtrl">
<div class="item col-xs-4 col-lg-4 " ng-repeat="products in data" >
<div class="thumbnail" >
<img class="group image" src="""" alt="" />
<div class="caption">
<h4 class="group inner item-heading"></h4>
<p class="group inner item-text"></p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
₹ </p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
listproduct.php
<?php
// Including database connections
$database='angulardatabase';
$connection= mysqli_connect('localhost', 'root', '');
if(!$connection){
die("Database Connection Failed".mysqli_errno($connection));
}
else
{
echo'Connection Successfull';
}
$select_db= mysqli_select_db($connection, $database);
if(!$select_db)
{
die("Database Selection Failed".mysqli_errno($connection));
}
// mysqli query to fetch all data from database
$query = "SELECT * from angulartable";
$result = mysqli_query($connection, $query);
$data = array();
if(mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
}
// Return json array containing data from the databasecon
echo $json_info = json_encode($data);
?>
angularscript.js
var fetch = angular.module('fetch',[]);
fetch.controller('dbCtrl',['$scope','$http',function($scope,$http){
$http.get("exactphp.php")
.success(function(data){
$scope.data=data;
alert(data);
})
.error(function(){
$scope.data="error in fetching data";
alert("Error in fetching data");
});
}]);
listproducts.css
.glyphicon { margin-right:5px; }
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
background: #428bca;
}
.item.list-group-item .list-group-image
{
margin-right: 10px;
}
.item.list-group-item .thumbnail
{
margin-bottom: 0px;
}
.item.list-group-item .caption
{
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
background: #eeeeee;
}
.item.list-group-item:before, .item.list-group-item:after
{
display: table;
content: " ";
}
.item.list-group-item img
{
float: left;
}
.item.list-group-item:after
{
clear: both;
}
.list-group-item-text
{
margin: 0 0 11px;
}
body
{
background-color: white;
padding-top:80px;
}
the result i want is that the product details should be uploaded from the database but when i fetch the data. It shows the error of duplicate enteries
angular.min.js:107 Error: [ngRepeat:dupes] http://ift.tt/2drOlbv at Error (native)
I don't know why this error is coming . I have two enteries in the database but i don't know where the problem is coming as i am newbie to ANGULAR.JS
Aucun commentaire:
Enregistrer un commentaire