Angular JS重複項不顯示任何數據

我想要的結果是一旦數據被提取，產品詳細信息就從數據庫上傳。它顯示重複條目的錯誤。Angular JS重複項不顯示任何數據

angular.min.js:107 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.8/ngRepeat/dupes?p0=products%20in%20data&p1=string%3An&p2=n at Error (native)

我在數據庫中有兩個入口，但找不到問題。

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=""{{products.PRODUCT_IMAGE_LINK}}"" alt="" /> 
      <div class="caption"> 
       <h4 class="group inner item-heading">{{products.PRODUCT_NAME}}</h4> 
       <p class="group inner item-text">{{products.PRODUCT_DESCRIPTION}}</p> 
       <div class="row"> 
       <div class="col-xs-12 col-md-6"> 
        <p class="lead"> 
        &#8377 {{products.PRODUCT_PRICE}}</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; 
}

來源

2016-10-05 Himanshu Chawla

你的問題http://stackoverflow.com/a/39640334/6608101 –

使用track by index

ng-repeat="products in data track by $index"

它track by $index跟蹤分別基於所述陣列中的每個項目的index的data陣列中每個對象的。所以，即使在datang-repeat中有重複，也可以分開追蹤它們。

來源

2016-10-05 08:04:45

數據的詳細答案是不牽強，但div的是不重複數據。請運行一次代碼。我給你一切。 –

你是否從後端獲得數據成功..你可以做'console.log'並嘗試.. –

在'data'中你有沒有像PRODUCT_DESCRIPTION'，'PRODUCT_NAME'等屬性的對象。 –

Occurs if there are duplicate keys in an ngRepeat expression. Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.

的消息告訴你到底該怎麼做：

Use 'track by' expression to specify unique keys

如果您有標識，如唯一的ID（例如products.id使用track by products.id）。如果您不這樣做，請使用$index，因爲$index始終是唯一的。

來源

2016-10-05 08:06:52

這個錯誤仍然是一樣的。我附加了從數據庫中獲取的JSON代碼。請看一看。我使用了$ index索引，但是它使匿名數字的div和數據不會從數據庫中獲取。 [{「PRODUCT_SKU」：「1」，「PRODUCT_NAME」：「PUNJABI SUIT」，「PRODUCT_DESCRIPTION」：「具有DUPATTA的PUNJABI套裝」，「PRODUCT_PRICE」：「5000」，「PRODUCT_IMAGE_LINK」：「https：\/\/rukminim1.flixcart.com \/image \/312 \/312 \/fabric \/v \/m \/x \ /mahi-pink-nk-nilkanthenterprises-original-imaeazp5chvsfgk5.jpeg?q=70「} –

I'米不知道我明白。當你添加JSON時，我會看一看。（提醒我）。此外，「它使匿名數字的div'它真的不應該這樣做。這是唯一的補充嗎？ '數據不是從數據庫中提取的'所以，從哪裏獲取數據？因爲你說有'div's。 –

請查看一次代碼。 JSON- 連接成功 [{「PRODUCT_SKU」：「1」，「PRODUCT_NAME」：「PUNJABI SUIT」，「PRODUCT_DESCRIPTION」：「PUNJABI適合DUPATTA套裝」，「PRODUCT_PRICE」：「5000」，「PRODUCT_IMAGE_LINK」 HTTPS：\/\/rukminim1.flixcart.com \ /圖像\/312 \/312 \ /織物\/v \ /米\/X \ /mahi-pink-nk-nilkanthenterprises-original-imaeazp5chvsfgk5.jpeg q = 70「} –

您正在收到此錯誤，因爲您的數據有一些重複鍵。所以要刪除這只是使用track by $index。

因此你修改後的代碼：

<div class="item col-xs-4 col-lg-4 " ng-repeat="products in data track by $index" > 
      <div class="thumbnail" > 
       <img class="group image" src=""{{products.PRODUCT_IMAGE_LINK}}"" alt="" /> 
       <div class="caption"> 
        <h4 class="group inner item-heading">{{products.PRODUCT_NAME}}</h4> 
        <p class="group inner item-text">{{products.PRODUCT_DESCRIPTION}}</p> 
        <div class="row"> 
         <div class="col-xs-12 col-md-6"> 
          <p class="lead"> 
           &#8377 {{products.PRODUCT_PRICE}}</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>

來源

2016-10-05 08:08:38

Its Done and it was mistake from my side in the listproduct.php file . 

<?php 
// Including database connections 
$database='angularwaladatabase'; 
$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 angularwalatable"; 
$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); 
?> 

The mistake is that json data was taking that "connection successfull" of the if else statement in the JSON and angular was getting confusing of that. 

<?php 
// Including database connections 
$database='angularwaladatabase'; 
$connection= mysqli_connect('localhost', 'root', ''); 

$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 angularwalatable"; 
$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); 
?> 

Thanks You All . Thanks for making me correct and you were right and correct . Thanks a Lot !!

來源

2016-10-05 09:03:37

Angular JS重複項不顯示任何數據

回答

相關問題