所以我有mysql数据库。用户可以在input中输入字段数,该数字存储在db中。当用户定义字段数(例如3)时,将出现新字段。在我们的3个字段的例子中,出现了新的6个字段。
对于3个字段中的每个字段,用户获得2个新字段。第一个输入名字,第二个输入数量。
他可以输入例如香蕉5,苹果7,橙子2。
在db中有
num_fields: 3,
1_name: banana,
2 _name:苹果,
3_name: orange,
1:5,
2: 7,
3: 2。
我在angularjs中创建了view:
<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。
有什么技巧和提示吗?:)
我做到了。我会把答案贴出来,这样以后如果有人需要的话,大家就可以看到了。
首先在js中我们可以移除角过滤器。我们将为每个选项显示列。然后在服务器端,我们将json编码为数组。因此,当执行query时,我们将这样写:
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>