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


Getting hidden form field with json list using 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;
    };
 });

在指示的行中,我尝试将 url 与 jsoncart 模型连接起来,但我无法获得其值。在隐藏字段中,我已经使用了"值","ng值","ng-bind",但无论如何我都无法获得值。

所以,我的问题是如何获取隐藏字段值?

谢谢马塞洛。

问题是 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