Javascript 从mysql获取数据，然后使用angularjs将每个数据显示在动态表中

所以我有mysql数据库。用户可以在input中输入字段的数量，该数量存储在db中。当用户定义字段数（例如3）时，将显示新字段。在3个字段的示例中，新的6个字段出现

对于3个字段中的每一个，用户将获得2个新字段。第一个输入名称，第二个输入数量

因此，他可以输入例如香蕉5、苹果7、橙色2

在我们的数据库中，我们有

数字字段：3

1_名称：香蕉

2_名称：苹果

3_名称：橙色

1:5,

2:7,

3:2

我在angularjs中创建了视图：

<table id="my_table">
            <thead>
                <tr>
                    <th>Fruit</th>
                    <th>Qty</th>
                    <th>Price</th>
                    <th>State</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in [] |  fields:fieldsExpr">
                    <td>fruits</td>
                    <td ng-repeat="qty in qtys">{{qty}}</td>
                    <td>
                        <input type="number" />
                    </td>
                    <td>
                        <input type="number" />
                    </td>
                </tr>
            </tbody>
        </table>

果
数量
价格
陈述
果实
{{qty}

还有我的js：

app.filter('fields', function () {
        return function (input, total) {
            total = parseInt(total);
            for (var i = 0; i < total; i++)
                input.push(i);
            return input;
        };
    });


app.controller('Fruit', ['$scope', '$http', function ($scope, $http) {
    //1st we need to get number of fields
    var numberOfFields = 'num_opts';
    $http({
        url: 'get_options.php',
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: $.param({option: numberOfFields})
    }).success(function (data, status, headers, config) {
        var fields = $.parseJSON(data);
        $scope.fields = extras;
    }).error(function (data, status, headers, config) {
        console.log(status);
    });
    //now we need to get other fields
    var fieldsLen = $scope.fields;
    $scope.qtys = [];
    for(var i=1;i<=fieldsLen;i++){
        $http({
        url: 'get_options.php',
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: $.param({option: i})
    }).success(function (data, status, headers, config) {
        var quantity = $.parseJSON(data);
        $scope.qtys.push(quantity);
        //array with qtys from table is retrieved successfully and we have array with '5', '7', '2'
    }).error(function (data, status, headers, config) {
        console.log(status);
    });
    }
}]);

app.filter（'fields'，function（）{
返回函数（输入，总计）{
总计=parseInt（总计）；
对于（变量i=0；i因为（var i=1；i所以我做了它。我将发布答案，以便将来如果有人需要它，人们可以看到它

首先，在js中，我们可以删除角度过滤器。我们将显示每个选项的列。然后在服务器端，我们将在数组中对json进行编码。因此，当执行查询时，我们将执行以下操作：

echo json_encode([
    'id' => $opt_name,//we can get any data we want from server
    'qty' => $value,
    'name' => $value2
]);

现在在我们的控制器中：

app.controller('Extras', ['$scope', '$http', '$routeParams', '$location', 'passData', 'pageContent', function ($scope, $http, $routeParams, $location, passData, pageContent) {
//1st we need to get number of fields
var numberOfFields = 'num_opts';
$http({
    url: 'get_options.php',
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({option: numberOfFields})
}).success(function (data, status, headers, config) {
    var fields = $.parseJSON(data);
    $scope.fields = fields;
}).error(function (data, status, headers, config) {
    console.log(status);
});
    var extrasLen = $scope.data.extras;
    //we define array to store data from server that we json_encode
    $scope.extras = [];
    for (var i = 1; i <= extrasLen; i++) {
        $http({
            url: 'get_table_fields.php',
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: $.param({option: i})
        }).success(function (data, status, headers, config) {
            //we add every new data to array
            $scope.extras.push(data);
        }).error(function (data, status, headers, config) {
            console.log(status);
        });
    }
}]);

所以我做了。我会把答案贴出来，这样将来如果有人需要的话，人们可以看到

首先，在js中，我们可以删除角度过滤器。我们将显示每个选项的列。然后在服务器端，我们将在数组中对json进行编码。因此，当执行查询时，我们将执行以下操作：

echo json_encode([
    'id' => $opt_name,//we can get any data we want from server
    'qty' => $value,
    'name' => $value2
]);

现在在我们的控制器中：

app.controller('Extras', ['$scope', '$http', '$routeParams', '$location', 'passData', 'pageContent', function ($scope, $http, $routeParams, $location, passData, pageContent) {
//1st we need to get number of fields
var numberOfFields = 'num_opts';
$http({
    url: 'get_options.php',
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({option: numberOfFields})
}).success(function (data, status, headers, config) {
    var fields = $.parseJSON(data);
    $scope.fields = fields;
}).error(function (data, status, headers, config) {
    console.log(status);
});
    var extrasLen = $scope.data.extras;
    //we define array to store data from server that we json_encode
    $scope.extras = [];
    for (var i = 1; i <= extrasLen; i++) {
        $http({
            url: 'get_table_fields.php',
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: $.param({option: i})
        }).success(function (data, status, headers, config) {
            //we add every new data to array
            $scope.extras.push(data);
        }).error(function (data, status, headers, config) {
            console.log(status);
        });
    }
}]);