Angularjs Dynamically add new div with child elements and model

Question

I have a jsfiddle set up at http://jsfiddle.net/skwidgets/gnvVY/13/

Basically there is a div with a few form elements in it including two drop down menus a radio button group and a link to remove that row.

<div ng-app="myapp">
<div id="w" ng-controller="survey">
    <div class="qs">
        <div class="">1</div>
        <div class="">
            <select data-role="none" name="w1.selected_location" data-ng-model="w.w1.selected_location" ng-options="location.value as location.label for location in locations">
                <option value="">Choose a Location</option>
            </select>
        </div>
        <div class="">
            <select data-role="none" name="selected_stage" data-ng-model="w.w1.selected_stage" ng-options="stage.value as stage.label for stage in stages">
                <option value="">Choose a Stage</option>
            </select>
        </div>
        <div class="">
            <input data-role="none" type="radio" name="wI4" value="true" data-ng-model="w.w1.wIn24">
        </div>
        <div class="">
            <input data-role="none" type="radio" name="wI4" value="false" data-ng-model="w.w1.wIn24">
        </div> <a href="#">Remove</a>

    </div>
    <div>
        <button data-role="none">Add Row/button>{{w | json}}</div>
</div>
</div>
<script>
    var locations = [{
    label: 'Head',
    value: 9,

}, {
    label: 'Shoulders',
    value: 5,
}
// ... more would go here
];

var stages = [{
    label: 'I',
    value: 0
}, {
    label: 'II',
    value: 1
}];
</script>

They are wrapped in a div with a class of "qs". All the selections are populated to a model called "w1" There is a button to add another row of these form elements and there parental container to the dom if the user wants to add another but it has to have a different model name that is similar to the first of (w1) but the number in the model name is incremented (w2, w3, and so forth) and so is the row number.

I have tried to make a directive to handle the behavior but have not had any luck.

Any Ideas will be appreciated.

Nikos Paraskevopoulos · Accepted Answer · 2016-03-28 11:21:13Z

The way to accomplish this in Angular (and MVVM frameworks generally) is to control the model. The model is naturally an array of objects, each object having the properies selected_location, selected_stage, wIn24. So start by this (following your naming, it can be improved):

function Model() {
    this.selected_location = null;
    this.selected_stage = null;
    this.wIn24 = null;
}

$scope.w = {
    w: [ new Model() ]
};

Now place the repeated part in an ng-repeat:

<div ng-repeat="ww in w.w">

And adjust the ng-models accordingly, e.g.:

<select data-role="none" data-ng-model="ww.selected_location"
    ng-options="location.value as location.label for location in locations">
    <option value="">Choose a Location</option>
</select>

Whenever a name is required and should be unique, use the {{ $index }}, if no id is available:

<input data-role="none" type="radio" name="wI4_{{$index}}" value="true"
    data-ng-model="ww.wIn24" />

Finally put the add() and remove() functions in the scope:

$scope.add = function() {
    $scope.w.w.push(new Model());
};

$scope.remove = function(ww) {
    var index = $scope.w.w.indexOf(ww);
    if( index >= 0 ) $scope.w.w.splice(index,1);
};

And bind them to the template:

<a ng-click="remove(ww)">Remove</a>

<button data-role="none" ng-click="add()">Add Wound</button>

This fiddle has the complete solution: http://jsfiddle.net/x9NjJ/

EDIT: The fiddle above vanished, including a full reconstructed source:

HTML:

<div ng-app="app" ng-controller="survey">
    <div ng-repeat="ww in w.w">
        <select data-role="none" data-ng-model="ww.selected_location"
            ng-options="location.value as location.label for location in locations">
            <option value="">Choose a Location</option>
        </select>
        <select data-role="none" data-ng-model="ww.selected_stage"
            ng-options="stage.value as stage.label for stage in stages">
            <option value="">Choose a Stage</option>
        </select>
        In 24: <input data-role="none" type="radio" name="wI4_{{$index}}" value="true" data-ng-model="ww.wIn24" />Yes
        <input data-role="none" type="radio" name="wI4_{{$index}}" value="false" data-ng-model="ww.wIn24" />No
        <a href="#" ng-click="remove(ww, $event)" style="display:inline-block; margin-left: 20px;">Remove</a>
    </div>
    <button data-role="none" ng-click="add()">Add Wound</button>
</div>

Javascript:

var app = angular.module('app', []);

function Model() {
    this.selected_location = null;
    this.selected_stage = null;
    this.wIn24 = null;
}

app.controller('survey', function($scope) {
    $scope.w = {
        w: [ new Model() ]
    };

    $scope.add = function() {
        $scope.w.w.push(new Model());
    };

    $scope.remove = function(ww, $event) {
        $event.preventDefault();
        var index = $scope.w.w.indexOf(ww);
        if( index >= 0 ) $scope.w.w.splice(index,1);
    };

    $scope.locations = [
        {
            label: 'Head',
            value: 9,

        },
        {
            label: 'Shoulders',
            value: 5,
        }
        // ... more would go here
    ];

    $scope.stages = [
        {
            label: 'I',
            value: 0
        },
        {
            label: 'II',
            value: 1
        }
    ];
});

Including reconstructed source here, the fiddle just vanished!

Dev · Accepted Answer · 2014-09-05 11:31:13Z

2

you can use this code for adding dynamic blocks

 <div ng-app="" ng-controller="customersController">

<ul>
<li ng-repeat="x in names">
<div>{{ x.Country }}</div>
</li>
</ul>

<script>
function customersController($scope,$http) {
 $http.get("http://www.w3schools.com/website/Customers_JSON.php")
 .success(function(response) {$scope.names = response;});}
</script>

answered Sep 5, 2014 at 11:31

Dev

1406 bronze badges

Collectives™ on Stack Overflow

Angularjs Dynamically add new div with child elements and model

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related