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

Question

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

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

所以他可以输入例如香蕉5，苹果7，橙子2。

在我们的数据库中我们有

num_fields：3，

1_name：香蕉，

2_name：苹果，

3_name：橙色，

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>

我的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);
    });
    }
}]);

所以我设法根据用户输入获取选项，并设法根据用户定义的数字在表中显示行。 但是我无法从数组中设置数字，因此它们会分别显示在表格行中。 使用上面的代码，我每行打印5,7,2。

任何技巧和提示？ :)

Answer 1

所以我做到了。 我会发布回答，以便将来有人可以看到它。

首先在我们的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);
        });
    }
}]);

现在在我们看来，我们可以通过简单的{{extra.property}}获取数据

    <table id="my_table">
        <thead>
            <tr>
                <th>Fruit</th>
                <th>Qty</th>
                <th>Price</th>
                <th>State</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="extra in extras">//show rows based on extras array
                <td>{{extra.name}}</td>//we can access data from extras
                <td>{{extra.qty}}</td>
                <td>
                    <input type="number" />
                </td>
                <td>
                    <input type="number" />
                </td>
            </tr>
        </tbody>
    </table>