Question

对于你所有的AngularJS大师，我有一个非常有趣的问题（我希望）。我期待基于SELECT下拉列表创建表单输入字段的动态列表。例如，我们有许多类别，每个类别都有一组规范，这些规范对于该类别是唯一的。为了帮助解释，我们有以下内容：

首先，在控制器中我们从初始化模型开始。

$scope.category = {};
$scope.category.specs = [];

接下来，我们准备好在表单中使用的数据（实际上是通过$ http从服务器检索的）。我们还将变量初始化为categories数组中的第一个元素。

$scope.categories = [
  { "id": "1", "name": "mobile", specs: [ 
    { "id": "1", "label": "Operating System" }, 
    { "id": "2", "label": "Camera type" } ] },
  { "id": "2", "name": "laptop", specs: [ 
    { "id": "1", "label": "Operating System" },
    { "id": "2", "label": "Graphics Card" } ] }
};  
$scope.selectedCategory = $scope.categories[0];

在表单中，我们有一个下拉列表，在选中时会加载特定于该类别的相应输入字段。我们使用ngRepeat指令来完成此任务。这是基于$ scope.categories.specs的动态字段列表。（请注意???）

<select ng-model="selectedCategory" ng-options="category.name for category in categories"></select>

<div ng-repeat="spec in selectedCategory.specs">
  <label>{{spec.label}}</label>
  <input type="text" ng-model="???">
</div>

最终，当用户点击提交按钮时，我们想要提取他/她选择的类别，然后将其与他们填写的规范一起打包。帖子请求应该包含类似下面的内容（例如当然，我只包括一个规格项目，但实际上会有很多）：

{ "id": "1", specs [ { "id": "2", "details": "RADEON HD 8970M" } ] }

不幸的是，我不确定如何实现这一目标。我需要以某种方式为spec模型创建一个数组，然后确保ID和用户输入的数据都被适当地提取出来......我们之后做了什么？任何帮助将不胜感激。

Answer 1

我就是这样做的。我创建一个表单，用angular验证它，然后当它有效时我用函数提交它。

  <form name="signup_form" novalidate ng-submit="signupForm()"></form>


  $scope.signupForm = function() {
var data = $scope.signup;
$http({
  method  : 'POST',
  url     : 'http://yoursite.com/mail.php',
    data    : $.param(data), // pass in data as strings
    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
  })
.success(function(data) {

});
}

如果您想查看另一个表单验证系统以进行角度检出http://nimbly.github.io/angular-formly/#!/它可以帮助您解决当前的表单系统。

Answer 2

在控制器中，按如下方式初始化$scope.specDetails：

$scope.specDetails = {};
angular.forEach($scope.categories, function (category, index1) {
    $scope.specDetails[category.id] = {};
    angular.forEach(category.specs, function (spec, index2) {
        $scope.specDetails[category.id][spec.id] = '';
    });
});

在html中，替换＆＃34; ???＆＃34;与specDetails[selectedCategory.id][spec.id]

AngularJS：如何创建一个包含输入字段动态列表数组的模型？

2 个答案: