如何在angularjs ng-repeat上使用数据

时间:2018-03-07 07:01:35

标签: angularjs

测试control.js

$scope.show_product_data = function() {
    $http.get("product-display.php").then(function successCallback(data) {      
    $scope.products=data;
    if($scope.products=='"null"')
    {
       alert("no product available");
    }
    console.log(data);
}, function errorCallback(response) {
    console.log(response);
})
}

产品Display.php的

$con = mysqli_connect('localhost', 'root', '', 'emagazi_test');
$qry = "SELECT * from product";
$result = mysqli_query($con, $qry);

if (mysqli_num_rows($result) > 0)
    {
    while ($row = mysqli_fetch_array($result))
        {
        $output[] = array(
            "product_id" => $row['product_id'],
            "brand_id" => $row['brand_id'],
            "vendor_id" => $row['vendor_id'],
            "product_name" => $row['product_name'],
            "product_image" => $row['product_image'],
            "product_color" => $row['product_color'],
            "product_size" => $row['product_size'],
            "product_description" => $row['product_description'],
            "product_price" => $row['product_price'],
            "profit_margin" => $row['profit_margin']
        );;
        }

    echo json_encode($output);
    }
  else
    {
    echo "null";
    }

JSON

[
   {
      "product_id":"1",
      "brand_id":"1",
      "vendor_id":"EMAVDR000001",
      "product_name":"k8 plus",
      "product_image":"",
      "product_color":"black",
      "product_size":"5",
      "product_description":"The Lenovo K8 Plus boasts of a dual rear camera setup, the sort that you usually find on more expensive devices. The secondary camera is used to gauge",
      "product_price":"9999",
      "profit_margin":"5"
   },
   {
      "product_id":"2",
      "brand_id":"12",
      "vendor_id":"EMAVDR000002",
      "product_name":"west",
      "product_image":"",
      "product_color":"red",
      "product_size":"34",
      "product_description":"zsdxgfchjbnk",
      "product_price":"200",
      "profit_margin":"4"
   },
   {
      "product_id":"3",
      "brand_id":"15",
      "vendor_id":"EMAVDR000002",
      "product_name":"kadalaparuppu",
      "product_image":"",
      "product_color":"brown",
      "product_size":"1",
      "product_description":"good product",
      "product_price":"20",
      "profit_margin":"4"
   },
   {
      "product_id":"4",
      "brand_id":"13",
      "vendor_id":"EMAVDR000002",
      "product_name":"iudasif",
      "product_image":"197311518764502-Hydrangeas.jpg",
      "product_color":"dsf",
      "product_size":"dsf",
      "product_description":"sdf",
      "product_price":"1000",
      "profit_margin":"3"
   },
   {
      "product_id":"5",
      "brand_id":"3",
      "vendor_id":"EMAVDR000002",
      "product_name":"sad",
      "product_image":"218751518764687-Penguins.jpg",
      "product_color":"asd",
      "product_size":"asd",
      "product_description":"sad",
      "product_price":"1000",
      "profit_margin":"1"
   },
   {
      "product_id":"7",
      "brand_id":"6",
      "vendor_id":"EMAVDR845885",
      "product_name":"canvas",
      "product_image":"30851518786514-Penguins.jpg",
      "product_color":"red",
      "product_size":"8",
      "product_description":"good",
      "product_price":"10000",
      "profit_margin":"6"
   }
]

我试图在ng-repeat中显示我的数据,但没有显示任何值。

1 个答案:

答案 0 :(得分:0)

为了帮助您解决问题,我需要查看html。

我可以在此期间建议的东西:

1 - 确保将控制器链接到html模板。一种简单的方法是添加ng-contrller="controllerName"

2 - 请务必将ng-repeatproducts一起使用。

<div ng-repeat="product in products">
   <pre>{{product | json}}</pre>
</div>

提供详细信息,这是我能做的最好的事情。请发布控制器的完整代码以及HTML代码,以便我们更好地了解您的问题