How to avoid dropdown duplicate after adding rows [AngularJS]

Question

I created a table of one row with one dropdown selection box.

I also added a button at the top of the table that duplicate another row that has another dropdown selection box of the same values.

The values stored inside the selection box are period of days.

Problem: because I am keeping track of the changes the user does when selecting values in the dropdown, the other rows added will change also to the same value. for example if I select for the period 3 days, the other added rows will have 3 days also

Here is the HTML code:

 <a class="navbar-brand" ng-click="addRow()" href="#"><button class="btn btn-default"> Add Drug </button></a> <!-- adds rows -->
      </div>
    </div>
    <div class="container-fluid">
        <table class="table">
        <tr ng-repeat="(rowIndex, row) in rows">    


        <td>
        <!-- Periods dropdown selection box -->
            <label>{{row.period}}
            <select popover="Choose how many times a day taken"  data-ng-model=""period.selectedPeriod""
                        data-ng-options="name for name in periods" style="width:70px;" required >
            </select>
            </label>
        </td>
        <td>
            <input type="button" value="-" class="btn btn-primary" ng-click="removeRow(rowIndex)"/>

        </td>
    </tr>
</table>

inside the controller, I have created the period values for the dropdown selection box:

//FOR THE DROPDOWN SELECTION BOX



        $scope.period = {                     
            currentPeriod: "1 day"               //for the data-ng-model
        };

        $scope.periods = [                      //the values
            "1 day",
            "2 days",
            "3 days",
            "4 days"
            ];

and for adding rows:

$scope.rows = [
    {   
        'period': "Period"
    }
];

    $scope.addRow = function() {

    $scope.rows.push(angular.copy($scope.rows[0]));

}

How did I try to solve it ?

The problem I believe lies in the data-ng-model. My value for it is period.selectedPeriod, it updates when selection changes. To solve it I entered a random value inside data-ng-model, the dropdown selection box would not duplicate as there are no keeping track of the changes. I could do that however I do want to keep track of selection changes by the user, so I do want to keep period.selectedPeriod as the value for data-ng-model

are there any solutions to that problem ?

I think each row should has its own 'selectedPeriod' so you should replace data-ng-model=""period.selectedPeriod" by data-ng-model=""row.selectedPeriod" — Giang Le
– Giang Le, Commented Aug 22, 2015 at 7:08
@GiangLe problem with this solution is that now how am I able to use row.selectedPeriod inside the controller ? $scope.row.selectedPeriod does not work. Also I tried it with rows.selectedPeriod, does not work — Mohamad Zein
– Mohamad Zein, Commented Aug 22, 2015 at 7:16

Rob Schmuecker · Accepted Answer · 2015-08-22 13:58:17Z

Your controller needs to look like this so that when you clone the row you also reinitialize the selectedPeriod property.

Then it's easy to loop through the rows and get which periods have been selected.

app = angular.module('app', []);
app.controller('myCtrl', function ($scope) {
    $scope.rows = [{
        'period': "Period"
    }];

    $scope.addRow = function () {
        var newRow = angular.copy($scope.rows[0]);
        newRow.selectedPeriod = null;
        $scope.rows.push(newRow);

    };

    //FOR THE DROPDOWN SELECTION BOX



    $scope.period = {
        currentPeriod: "1 day" //for the data-ng-model
    };

    $scope.periods = [ //the values
    "1 day",
        "2 days",
        "3 days",
        "4 days"];

    $scope.showMeSelectedPeriods = function () {
        $scope.rows.forEach(function (value, index) {
            console.log(index, value);
        });
    };
});

Demo: http://jsfiddle.net/7cfto0da/1/

The problem is, now row.selectedPeriod cannot be watched if I need to use it in the controller. example this does not show change on console log when changing the value of it: $scope.$watch("row.selectedPeriod", function() { console.log("change!"); }
so the question would be how to use row.selectedPeriod which is undefined inside the controller

Collectives™ on Stack Overflow

How to avoid dropdown duplicate after adding rows [AngularJS]

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related