javascript - 使用 AngularJS 生成新字段

Question

当一个项目被插入数组时，我试图生成一个新的表单。形式始终相同，只是条件计数加一。

类似这样的事情:

<span ng-show="companydata.selectedloc.length == 0">
    <div angucomplete-alt id="ex1"
    selected-object="selectedLocation"
    ></div>
</span>

<span ng-show="companydata.selectedloc.length == 1">
    <div angucomplete-alt id="ex1"
    selected-object="selectedLocation"
    ></div>
</span>

<span ng-show="companydata.selectedloc.length == 2">
    <div angucomplete-alt id="ex1"
    selected-object="selectedLocation"
    ></div>
</span>

每个代码块都会在选择时将一个项目推送到 companydata.selectedloc 中(这是一个自动完成选择输入)。

这是 JS 函数:

$scope.selectedLocation = function(selected){
    $scope.companydata.selectedloc.push(selected)
}

始终使用相同的代码块，有没有比手动增加条件并根据需要添加尽可能多的代码块(假设最多 10 个)更优雅的方法？

Answer 1

您应该利用 Angular 的内置 ng-repeat directive .

这是一个工作 Fiddle

请注意，在 fiddle 中，我添加了 track by $index，因为我不知道您的selected 值是什么。请注意，通过 $index 进行跟踪需要权衡，但有时需要防止 Angular 抛出重复错误。

通过 fiddle ，我声明了 companydata 变量，如下所示:

$scope.companydata = {
  selectedloc: [] // Initialized with an empty array
}

如果您希望预先填充它，那很简单:

$scope.companydata = {
  selectedloc: [0, 1, 2] // Initialized with valu(es) as needed
}

查看此updated Fiddle对于更丰富的示例，我用模拟的“位置”对象更新了它。

<span ng-repeat="loc in companydata.selectedloc">
    <div angucomplete-alt id="ex1"
    selected-object="selectedLocation"
    ></div>
</span>