Fatal编程技术网
  • javascript/
  • Javascript 如何在angularJS中将动态数据绑定到数组

Javascript 如何在angularJS中将动态数据绑定到数组

javascript php angularjs ajax

Javascript 如何在angularJS中将动态数据绑定到数组,javascript,php,angularjs,ajax,Javascript,Php,Angularjs,Ajax,我是个新手。我已经启动了一个购物车web应用程序。所以我从网上找到了一个购物车插件 . 但是在这个插件中，我们只能有静态数据。我想要一个从数据库中提取的动态数据。下面是我的代码 default.html <!doctype html> <html ng-app="AngularStore"> <head> <title>Shopping Cart with AngularJS</title> <!-- Boo

我是个新手。我已经启动了一个购物车web应用程序。所以我从网上找到了一个购物车插件 . 但是在这个插件中，我们只能有静态数据。我想要一个从数据库中提取的动态数据。下面是我的代码

default.html

<!doctype html>
<html ng-app="AngularStore">
  <head>
    <title>Shopping Cart with AngularJS</title>

    <!-- Bootstrap, jQuery, Angular-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js" type="text/javascript"></script>

    <!-- AngularStore app -->
    <script src="js/product.js" type="text/javascript"></script>
    <script src="js/store.js" type="text/javascript"></script>
    <script src="js/shoppingCart.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
    <script src="js/controller.js" type="text/javascript"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
  </head>

  <body>

    <!-- 
        bootstrap fluid layout
        (12 columns: span 10, offset 1 centers the content and adds a margin on each side)
    -->
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span10 offset1">
                <h1 class="well" >
                    <a href="default.htm">
                        <img src="img/logo.png" height="60" width="60" alt="logo"/>
                    </a>
                    Angular Store 
                </h1>
                <div ng-view></div>
            </div>
        </div>
    </div>

  </body>
</html>
store.js

function store() {
    this.products = [

       new product("APL", "Apple", "Eat one every…", 12, 90, 0, 2, 0, 1, 2),
       new product("AVC", "Avocado", "Guacamole…", 16, 90, 0, 1, 1, 1, 2),
       new product("BAN", "Banana", "These are…", 4, 120, 0, 2, 1, 2, 2)      

    ];        

}
store.prototype.getProduct = function (sku) {
    for (var i = 0; i < this.products.length; i++) {
        if (this.products[i].sku == sku)
            return this.products[i];
    }
    return null;
}

函数存储（）{
此项。产品=[
新产品（“APL”，“苹果”，“每…吃一个”，12,90,0,2,0,1,2），
新产品（“AVC”、“鳄梨”、“鳄梨酱…”）、16、90、0、1、1、1、2、，
新产品（“禁令”、“香蕉”、“这些是……”）、4120、0、2、1、2、2）
];        
}
store.prototype.getProduct=功能（sku）{
对于（var i=0；i
在上面的代码中，我们只是传递一些静态数据，比如apple Avocado，我想绑定从数据库中获取的数据。我已经编写了PHP代码来获取数据，但我不知道如何将其绑定到数组。这就是目标产品

select.php

<?php
$connect=mysqli_connect("localhost","root","","shopping");

$output=array();

$query="select serial,name,description,price from products";
$result=mysqli_query($connect,$query);
if(mysqli_num_rows($result)>0)
{
    while ($row=mysqli_fetch_array($result))
     {
        $output[]=$row;
    }
    echo json_encode($output);
}
?>
在购物车中添加商品-（您可以使用
附加项（sku、名称、价格、数量）添加数据）
正如文章中提到的，附加项用于在购物车中添加或删除商品。在数据库调用的响应中，使用附加项。）

假设您必须在表列表中添加数据，那么“select.php”将返回ListOfData-

function yourController($scope,DataService) {

$scope.store = DataService.store;
//Get Call for the list
$scope.getList=function(){
  $http({ method: 'GET', url: 'select.php' }).then(function 
  success(response) 
 { 
    alert(response);
   $scope.posts=response.data; 
    for(var i=0;i<$scope.posts.length;i++){
      $scope.store.products.push(new product($scope.posts[i].sku,  
      $scope.posts[i].name, $scope.posts[i].description, 
      $scope.posts[i].price, $scope.posts[i].cal, 
      $scope.posts[i].carot, 
      $scope.posts[i].fiber, $scope.posts[i].folate, 
      $scope.posts[i].potassium,$scope.posts[i].vitc));
    }
  }, function error(response) { 
     // called asynchronously if an error occurs // 
    or server returns response with an error status. 
  } 
}
$scope.getList();
}
因此，我们必须通过创建product class对象将新数据推送到products数组中。

@Namedo Karande但在这里，我们在store.js文件中传递一些静态数据。但我想传递这些动态数据。我该怎么做？假设您有一个api调用来获取store.js文件中的CartData，那么在api成功函数中您可以使用addItem.$http（{method'get'，url'select.php'}）。然后（函数成功（response）{alert（response）；$scope.posts=response.data；}，函数错误（response）{//如果发生错误，异步调用//或服务器返回错误状态的响应。}我想将此数据绑定到名为product.new product（“BAN”、“Banana”、“这些是…”）、4、120、0、2、1、2、2）的对象。除此之外，我想将response.data的动态数据绑定。如何绑定此数据？ 
<?php
$connect=mysqli_connect("localhost","root","","shopping");

$output=array();

$query="select serial,name,description,price from products";
$result=mysqli_query($connect,$query);
if(mysqli_num_rows($result)>0)
{
    while ($row=mysqli_fetch_array($result))
     {
        $output[]=$row;
    }
    echo json_encode($output);
}
?>

function yourController($scope,DataService) {

$scope.store = DataService.store;
//Get Call for the list
$scope.getList=function(){
  $http({ method: 'GET', url: 'select.php' }).then(function 
  success(response) 
 { 
    alert(response);
   $scope.posts=response.data; 
    for(var i=0;i<$scope.posts.length;i++){
      $scope.store.products.push(new product($scope.posts[i].sku,  
      $scope.posts[i].name, $scope.posts[i].description, 
      $scope.posts[i].price, $scope.posts[i].cal, 
      $scope.posts[i].carot, 
      $scope.posts[i].fiber, $scope.posts[i].folate, 
      $scope.posts[i].potassium,$scope.posts[i].vitc));
    }
  }, function error(response) { 
     // called asynchronously if an error occurs // 
    or server returns response with an error status. 
  } 
}
$scope.getList();
}

// product class
function product(sku, name, description, price, cal, carot, vitc, folate, potassium, fiber) {
    this.sku = sku; // product code (SKU = stock keeping unit)
    this.name = name;
    this.description = description;
    this.price = price;
    this.cal = cal;
    this.nutrients = {
        "Carotenoid": carot,
        "Vitamin C": vitc,
        "Folates": folate,
        "Potassium": potassium,
        "Fiber": fiber
    };
}