Question

我正在使用角度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个按钮的文本框）。

在第一个文本框中输入123，然后单击“添加”将创建带有删除，取消，添加按钮并输入值的新文本框。
再次添加新值243然后再次需要使用输入的值（以及相同的控件）创建新文本框到下一行。

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

Answer 1

您可以将ng-repeat与关联数组一起使用。添加基本上会将模型值推送到数组，并且还是数组中的空对象。

<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>

在控制器中：

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

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

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

Plunker：https://plnkr.co/edit/3lklQ6ADn9gArCDYw2Op?p=preview

Answer 2

希望这会有所帮助!!

<html ng-app="exampleApp">

<head>
    <title>Directives</title>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        angular.module('exampleApp', [])
            .controller('defaultCtrl', function () {
                vm = this;
                vm.numbers = [1, 2, 3];
                vm.add = function (number) {
                    vm.numbers.push(number);
                }
                vm.remove = function (number) {
                    var index = vm.numbers.indexOf(number);
                    if(index>-1){
                         vm.numbers.splice(index, 1);
                    }
                }
            });
    </script>
</head>

<body ng-controller="defaultCtrl as vm">
    <div ng-repeat="num in vm.numbers">
        <span>Number : {{num}}</span>
    </div>
    <div>
        <input type="number" ng-model="vm.newNumber">
        <button ng-click="vm.add(vm.newNumber)">Add</button>
        <button ng-click="vm.remove(vm.newNumber)">Remove</button>
    </div>
</body>

</html>

动态创建文本框元素并绑定不同的模型

2 个答案: