javascript - 动态创建文本框元素并绑定(bind)不同的模型

Question

我在 angular js 应用程序中工作，我需要动态创建带有按钮的文本框，这意味着

<div class="col-sm-4 type7" style="font-size:14px;">
    <div style="margin-bottom:5px;">NDC9</div>
        <input type="text" name="ndc9" class="form-control txtBoxEdit" ng-model="ndc9">
</div>
<div class="col-sm-4 type7 " style="font-size:14px;">
    <div style="padding-top:20px; display:block"> 
        <span class="red" id="delete" ng-class="{'disabled' : 'true'}">Delete</span> &nbsp; <span>Cancel </span> &nbsp;  <span id="addRow" style="cursor:pointer" ng-click="ndcCheck(0)">Add </span>
    </div>
</div>

这将创建下面的一个

我将在上面的文本框中输入一些值并单击添加，它需要在下一行使用相同的控件集创建，这意味着(需要使用输入的值再次创建具有以上 3 个按钮的文本框)。

1. 在第一个文本框中输入 123 并单击“添加”将创建新的文本框，其中包含带有输入值的删除、取消、添加按钮。
2. 我再次添加新值 243，然后再次需要创建新的文本框到下一行输入的值(以及相同的控件)。

最后我想获取所有输入的值。我怎样才能在 Angular js 中实现这一点

Answer 1

您可以将 ng-repeat 与关联数组一起使用。 Add 基本上会将模型值推送到一个数组以及数组中的一个空对象。

<div ng-repeat ="ndc in NDCarray">
    <div class="col-sm-4 type7" style="font-size:14px;">
        <div style="margin-bottom:5px;">NDC9</div>
            <input type="text" name="ndc9" class="form-control txtBoxEdit" ng-model="ndc.val">
        </div>
    </div>
    <div class="col-sm-4 type7 " style="font-size:14px;">
        <div style="padding-top:20px; display:block"> 
            <span class="red" id="delete" ng-class="{'disabled' : 'true'}" ng-click="NDCdelete($index)">Delete</span> &nbsp; 
            <span>Cancel </span> &nbsp;  
            <span id="addRow" style="cursor:pointer" ng-click="NDCadd ()">Add </span>
        </div>
    </div>
</div>

在 Controller 中:

$scope.NDCarray = [{val: ''}];

$scope.NDCadd = function() {
    $scope.NDCarray.unshift(
        {val: ''}
    );
};

$scope.NDCdelete = function(index) {
    $scope.NDCarray.splice(index, 1);
};

笨蛋:https://plnkr.co/edit/3lklQ6ADn9gArCDYw2Op?p=preview