使用AngularJs获取带有json列表的隐藏表单字段

时间:2015-02-10 18:39:44

标签: php angularjs

我遇到这种情况:

我的PHP文件的一部分:

<form action="fechar_pedido.php" method="post" enctype="multipart/form-data" ng-controller="carrinhoQtdeController">

    <?php 
        $json_data = array();

        foreach($_SESSION['carrinho'] as $key => $value)
        {
            $json_array = array();
            $prod_info = array_values($value); 
            $json_array += array($prod_info[0] . '-' . $prod_info[1]=>array("id" => $prod_info[0], "tamanho" => $prod_info[1], "qtde" => $prod_info[2], "classificacao" => intval($prod_info[3]), "id_depto" =>  intval($prod_info[4]),"id_categ" => intval($prod_info[5]),"id_subcateg" => intval($prod_info[6])));

            array_push($json_data, $json_array);
        }

        $json_data = json_encode($json_data);
                ?>                      

<input type="hidden" ng-model="jsoncart" value="<?php echo $json_data; ?>" />

上面,我有一个foreach用我当前的购物车产品填充数组,并以json格式列表转换此数组。

之后,我用这个json列表设置了一个隐藏的表单字段。我的想法是在我的角度函数中得到这个值,如下所述。

以下是我隐藏字段的结果:

<input type="hidden" ng-model="jsoncart" value="[{"1-XGG":{"id":1,"tamanho":"XGG","qtde":4,"classificacao":7,"id_depto":1,"id_categ":1,"id_subcateg":4}},{"2-M":{"id":2,"tamanho":"M","qtde":1,"classificacao":4,"id_depto":1,"id_categ":1,"id_subcateg":4}}]" />

这是我的角度文件的一部分:

var app = angular.module('myApp', []);

app.controller('carrinhoQtdeController', function($scope) {
    $scope.bill = { total: 0, subtotal: 0 };
    $scope.items = "";
    $scope.param = "?jsoncart=" + $scope.jsoncart; <----- Here I try to get hidden field value !!!!
    $http.get("./fetch_carrinho.php" + $scope.param)
        .success(function(response){
            $scope.items = response;
        })
        .error(function(error) {
            alert(error);
            $scope.carrinho = "error in fetching data";
    });

    var calculateTotals = function() {
        var total = 0;

        for (var i = 0, len = $scope.items.length; i < len; i++) {
            total = total + 
                $scope.items[i].price * 
                $scope.items[i].quantity;
        }

        $scope.bill.total = total;
        $scope.bill.subtotal = total - $scope.bill.discount;
    };
 });

在指示的行中,我尝试使用jsoncart模型加入url,但是我无法获得它的价值。在隐藏字段中,我已经使用了“值”,“ng-value”,“ng-bind”,但无论如何我都无法获得该值。

那么,我的问题是如何获得隐藏的字段值?

谢谢, 马塞洛。

1 个答案:

答案 0 :(得分:1)

问题是,在加载页面后,Angular会发挥其魔力。由于您已在Angular执行之前使用值填充输入,因此它使用ng-model变量jsoncart的内容覆盖了该值。

<body ng-controller="Ctrl">
    <div><input name="first" ng-model="first" value="abc"></div> <-- this is blank after Angular runs
    <div><input name="second" value="def"></div>
    <p>first: {{first}}</p>
  </body>

查看完整的plunkr:plnkr.co/edit/87NPheulFXofU5LdE5hK?p=preview

要解决此问题,您必须填充jsoncart而不是输入。

更新1: 更新了plnkr以显示如何从静态HTML值中获取字符串。 plnkr.co/edit/87NPheulFXofU5LdE5hK?p=preview