如何使用动态变量转换成角度

debugcn 发表于 Dev

Jayadratha蒙达（Jayadratha mondal）

我有一个表单，我在其中进行输入，并根据此表单创建多个输入框。为此，下面给出了javascript代码。

for(i = 1; i <= c; i++) { //c = total input count
    block = block + '<div class="row">'+
            '<div class="form-group col-lg-12">'+
                '<input id="name" ng-model="new.var'+i+'name" type="text" class="form-control">'+
                '<input id="type" ng-model="new.var'+i+'type" type="text" class="form-control">'+
            '</div>'+
            '</div>';
}
document.getElementById("vars").innerHTML = block;

上面的代码可以正常工作＆ng-model正在动态生成的很好，诸如此类new.var1name , new.var1type , new.var2name , new.var2type。

但是如何在我的控制器中获取这些变量？如果我按如下所示在控制器中生成这些变量，则其给出错误，即找不到“名称”。

var var1 = [];
for(i = 1; i <= c; i++) { //c = total input count
    var item = {};
    console.log('var'+i+'name', 'var'+i+'unit');
    item['name'] = $scope.new.var+i+name;
    item['type'] = $scope.new.var+i+type;
    var1.push(item);
} 
console.log(JSON.stringify(var1));

所以我用下面的方式，但是现在没有错误，但是var1是空的。

var var1 = [];
for(i = 1; i <= c; i++) {
    var item = {};
    console.log('var'+i+'name', 'var'+i+'type');
    item['name'] = $scope.new['var'+i+'name'];
    item['type'] = $scope.new['var'+i+'type'];
    var1.push(item);
}
console.log(JSON.stringify(var1));

请任何人帮助我找到我在做错什么，或者有可能做吗？？？

理查德·斯纳泽尔

我建议不要在控制器中生成html，而应在视图中编写该html，并使用angular的ng-repeat指令重复它：https : //docs.angularjs.org/api/ng/directive/ngRepeat。像这样的东西（未经测试）：

<div ng-repeat="item in c track by $index">
    <input id="name" ng-model="name[$index]" type="text" class="form-control">
    <input id="type" ng-model="type[$index]" type="text" class="form-control">
</div>

然后，您应该能够从$ scope内的控制器中访问名称和类型数组。如果“ c”是原始输入的ng模型（定义重复的次数），那么如果这是所需的功能，则应该动态添加新字段。

已编辑

在您的控制器中

$scope.c = 5;
$scope.getNumber = function(num) {
  return new Array(num);   
}

在你看来

<div ng-repeat="i in getNumber(c) track by $index">
    <input id="name" ng-model="name[$index]" type="text" class="form-control">
    <input id="type" ng-model="type[$index]" type="text" class="form-control">
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。