Question

我创建了一个包含一个下拉选择框的行表。

我还在表格的顶部添加了一个按钮，该按钮复制了另一行，该行具有相同值的另一个下拉选择框。

选择框中存储的值是天数。

问题：因为我在跟踪下拉列表中选择值时用户所做的更改，所以添加的其他行也会更改为相同的值。例如，如果我选择3天的时间段，其他添加的行也将有3天

以下是HTML代码：

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

在控制器内部，我已经为下拉选择框创建了周期值：

//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.rows = [
    {   
        'period': "Period"
    }
];

    $scope.addRow = function() {

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

}

我是如何尝试解决的？

我认为问题在于data-ng-model。我的价值是period.selectedPeriod，它会在选择更改时更新。为了解决这个问题，我在data-ng-model中输入了一个随机值，下拉选择框不会重复，因为没有跟踪更改。我可以这样做但是我确实希望跟踪用户的选择更改，因此我确实希望将period.selectedPeriod作为data-ng-model

的值

有没有解决这个问题的方法？

Answer 1

您的控制器需要看起来像这样，以便在克隆行时也重新初始化selectedPeriod属性。

然后，可以轻松遍历rows并获取已选择的时段。

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);
        });
    };
});

演示：http://jsfiddle.net/7cfto0da/1/

添加行后如何避免重复删除[AngularJS]

1 个答案: