creating textbox element dynamically and bind different model

Question

I am working in angular js application, where i need to create textbox with buttons dynamically that means

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

this will create below one

i will enter some value in above textbox and click add ,it needs to be created in next line with same set of controls that means (textbox with above 3 buttons need to be created again with the entered value).

Entering 123 in first textbox and click add will create new textbox with delete,cancel,add button with entered value.
Again am adding new value 243 then again it needs to create new textbox down to next line with the entered value (and also the same controls).

finally i want to get all the entered values. how can i achieve this in angular js

Sajal · Accepted Answer · 2016-05-17 12:10:10Z

2

You could use ng-repeat with an associative array. Add Would basically push the model value to an array and and also an empty object in the array.

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

In the controller:

$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

edited May 17, 2016 at 12:10

answered May 17, 2016 at 11:47

Sajal

4,4111 gold badge22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SivaRajini Over a year ago

how it will work for initial element. initially i want all 3 controls need to be there. when i click add then that time again i have create same set of controls ? will it work in that case ?.. please make it in fddle

Sajal Over a year ago

Are you dynamically loading the html as well? See the update to answer

Umamaheswaran · Accepted Answer · 2016-05-17 11:56:19Z

Hope this helps!!

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

Collectives™ on Stack Overflow

creating textbox element dynamically and bind different model

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related