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

时间:2017-07-25 05:09:39

标签: javascript php angularjs ajax

我是棱角分明的新人。我已经开始购物车网络应用程序了。所以我从网上找到了一个购物车插件 https://www.codeproject.com/Articles/576246/A-Shopping-Cart-Application-Built-with-AngularJS。但是在这个插件中,我们只能拥有静态数据。我想要从数据库中获取动态数据。下面是我的代码

default.html中

class Quaternion_toEulerianAngle():
    def __init__(self, x, y, z, w):
        self.x = x
        self.y = y
        self.z = z
        self.w = w

    def X(self):
        ysqr = self.y*self.y

        t0 = +2.0 * (self.w * self.x + self.y*self.z)
        t1 = +1.0 - 2.0 * (self.x*self.x + ysqr)
        X = math.degrees(math.atan2(t0, t1))

        return X

    def Y(self):
        ysqr = self.y*self.y

        t2 = +2.0 * (self.w*self.y - self.z*self.x)
        t2 =  1 if t2 > 1 else t2
        t2 = -1 if t2 < -1 else t2
        Y = math.degrees(math.asin(t2))

        return Y

    def Z(self):
        ysqr = self.y*self.y

        t3 = +2.0 * (self.w * self.z + self.x*self.y)
        t4 = +1.0 - 2.0 * (ysqr + self.z*self.z)
        Z = math.degrees(math.atan2(t3, t4))

        return Z

app.js

<!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>
   
'use strict';

// App Module: the name AngularStore matches the ng-app attribute in the main <html> tag
// the route provides parses the URL and injects the appropriate partial page
var storeApp = angular.module('AngularStore', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/store', {
        templateUrl: 'partials/store.htm',
        controller: storeController 
      }).
      when('/products/:productSku', {
        templateUrl: 'partials/product.htm',
        controller: storeController
      }).
      when('/cart', {
        templateUrl: 'partials/shoppingCart.htm',
        controller: storeController
      }).
      otherwise({
        redirectTo: '/store'
      });
}]);

store.js

storeApp.factory("DataService", function () {

    // create store
    var myStore = new store();

    // create shopping cart
    var myCart = new shoppingCart("AngularStore");

    // enable PayPal checkout
    // note: the second parameter identifies the merchant; in order to use the 
    // shopping cart with PayPal, you have to create a merchant account with 
    // PayPal. You can do that here:
    // https://www.paypal.com/webapps/mpp/merchant
    myCart.addCheckoutParameters("PayPal", "bernardo.castilho-facilitator@gmail.com");

    // enable Google Wallet checkout
    // note: the second parameter identifies the merchant; in order to use the 
    // shopping cart with Google Wallet, you have to create a merchant account with 
    // Google. You can do that here:
    // https://developers.google.com/commerce/wallet/digital/training/getting-started/merchant-setup
    myCart.addCheckoutParameters("Google", "500640663394527",
        {
            ship_method_name_1: "UPS Next Day Air",
            ship_method_price_1: "20.00",
            ship_method_currency_1: "USD",
            ship_method_name_2: "UPS Ground",
            ship_method_price_2: "15.00",
            ship_method_currency_2: "USD"
        }
    );

    // return data object with store and cart
    return {
        store: myStore,
        cart: myCart
    };
});

在上面的代码中,我们只是传递一些静态数据,如apple Avocado,而不是那样,我想绑定从数据库中获取的数据。我编写了PHP代码来获取数据,但我不知道如何将它绑定到数组。那是对象产品。

select.php

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

1 个答案:

答案 0 :(得分:0)

在购物车中添加商品 - (您可以使用addItem(sku, name, price, quantity)添加数据,如文中所述,additem用于在购物车中添加或删除商品。在数据库调用的响应中使用addItem。 )

假设您必须在表格列表中添加数据,以便&#34; select.php&#34;然后返回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
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
    };
}

因此,我们必须通过创建产品类对象来推送产品数组中的新数据。