堆栈内存溢出
  简体   繁体   English

Angular JS 重复没有显示任何数据

[英]Angular JS duplicates not showing any data

 原文  2016-10-05 08:01:48  2   4    javascript/ php/ html/ angularjs/ web

问题描述

The result I want is the product details uploading from the database once the data is fetched.我想要的结果是获取数据后从数据库上传的产品详细信息。 It shows the error of duplicate entries.它显示重复条目的错误。

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) angular.min.js:107 错误：[ngRepeat:dupes] http://errors.angularjs.org/1.4.8/ngRepeat/dupes?p0=products%20in%20data&p1=string%3An&p2=n at Error (native)

I have two enteries in the database but I can't find the problem.我在数据库中有两个条目，但我找不到问题。

HTML 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

<?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 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列表产品.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;
}

4 个解决方案

解决方案1
 0 已采纳  2016-10-05 08:04:45

Use track by index track by index使用track by index

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

It track by $index keeps track of each object in the data array separately based on index of each item in the array.它track by $index跟踪，根据数组中每个项目的index分别跟踪data数组中的每个对象。 So, even if there are duplicates in the data ng-repeat can keep track of them separately.所以，即使data有重复， ng-repeat也可以单独跟踪。

解决方案2
 0  2016-10-05 08:06:52

Occurs if there are duplicate keys in an ngRepeat expression.在 ngRepeat 表达式中存在重复键时发生。 Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.禁止重复键，因为 AngularJS 使用键将 DOM 节点与项目相关联。

The message tells you exactly what to do:该消息准确地告诉您该怎么做：

Use 'track by' expression to specify unique keys使用“track by”表达式指定唯一键

If you have identifier such as unique ID (for example products.id use track by products.id ).如果您有诸如唯一 ID 之类的标识符（例如products.id使用track by products.id ）。 If you don't, use $index due the $index is always unique.如果不这样做，请使用$index因为$index始终是唯一的。

解决方案3
 0  2016-10-05 08:08:38

You are getting this error because your data have some duplicates keys.您收到此错误是因为您的数据有一些重复的键。 So to remove this just use track by $index .所以要删除它，只需使用track by $index 。

Hence you modified code:因此你修改了代码：

  <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>

解决方案4
 0  2016-10-05 09:03:37

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 !!

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 角度发布请求未显示任何响应数据 - Angular post request not showing any response data 角度js数组数据显示不正确 - angular js array data is not showing properly 显示带有角度js数据绑定形式的引导箱 - Showing the bootbox with the angular js data binded form 简单的Angular JS应用程序无法正常工作且未显示任何错误 - Simple Angular JS app not working and not showing any errors Angular ngrepeat不显示对象数组中的任何数据 - Angular ngrepeat not showing any data from an array of objects 文本未在Angular JS中显示 - Text not showing in Angular JS 使用javascript处理数据并使用Angular.JS以HTML显示 - Processing data with javascript and showing in HTML with Angular.JS Angular js，未在表中显示套接字数据（ng-repeat） - Angular js, not showing socket data at Table (ng-repeat) 简单的Angular.js：ng-repeat不显示数据 - Simple Angular.js: ng-repeat not showing data Angular JS简单API：仅显示以单词“ request”开头的数据 - Angular JS simple API: only showing data that begins with the word 'request'
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM