向表中添加行将导致下拉函数重复。

Question

我已经创建了一个有三个下拉行的表

药物-剂量期

我还创建了一个按钮Add ，它将添加另一行相同的下拉列表

我从数据库中获取数据并将其填充到下拉列表中。

异常：

剂量下降取决于药物是什么。所以我创建了一个观察者来检查药物的value何时变化，然后创建一个名为$scope.array的剂量数据数组，并在$scope.selectedDose中填充它，这是剂量下降内的值。因此，第一种药物剂量数据与第二种药物剂量数据不同。请选择第二种和第五种药物，并观察剂量值如何改变。

$scope.$watch("value",  function() {
  $scope.array = $scope.value.dose_array.split(',');
  $scope.selectedDose = $scope.array[0];
});

问题

如果您使用我共享的JSFiddle链接，您会发现当使用按钮添加药物并从第一行中选择另一种药物时，第一行的剂量数据也会发生变化。其原因是因为$scope.selectedDose与任何行中的任何药物数据都发生了变化。

我想到的解决方案是创建数组的数组。

$scope.selectedDose[rowIndex] = $scope.array[0];

随着每一行的添加，剂量下降将有自己的selectedDose数据。然而，它是复杂的，无法完成它。

这个问题有什么解决办法吗？我已经添加了JSFiddle并尽可能地组织了我的代码。它应该能很好地证明我的问题。

JSFIDDLE

http://jsfiddle.net/jq3fxx72/3/

Answer 1

我不会为添加doseArray而添加手表。您可以将其添加到ng-click事件中，并将其作为doseArray添加到当前的row中。

还可以改进变量和函数名，因为没有人知道函数func是做什么的。好的名字会帮助你理解你的代码。

请查看下面的演示或此小提琴中的演示。

​

app = angular.module('app', []);
app.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.rows = [];
    var rowTmpl = {
        'drug': "Drug",
        'dose': 'Dose',
        'period': "Period",
    };

    // init first row
    $scope.rows.push(angular.copy(rowTmpl));

    //PERIOD

    $scope.period = {
        currentPeriod: "1 day"
    };

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

    $http.get('http://medicaladvisto.com/getDrugs').success(function (data) {
        $scope.ourDatas = data;
        //console.log(data);
    });

    $scope.setDose = function (row, drug) {
        //console.log('Selcted', drug);
        var index = $scope.ourDatas.indexOf(drug);
        if (index === -1) return;

        var doseArray = $scope.ourDatas[index].dose_array.split(',');
        row.doseOptions = doseArray;
    };

    //ADDING ROWS

    $scope.addRow = function () {
        var newRow = angular.copy(rowTmpl);
        newRow.selectedPeriod = null;
        newRow.singleSelect = null;
        $scope.rows.push(newRow);
    };

    $scope.removeRow = function (rowIndex) {
        if (confirm('Are you sure you want to delete this?')) $scope.rows.splice(rowIndex, 1);
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
    <div class="buttons"> <a class="navbar-brand" ng-click="addRow()" href="#">
                    <button class="btn btn-default"> Add Drug</button></a> 
        <!-- adds rows -->
    </div>
    <table class="table">
        <tr ng-repeat="(rowIndex, row) in rows">
            <td>{{ourDatas.doseOptions}}</td>
            <td>
                <label for="singleSelect">{{row.drug}}
                    <select class="form-control" popover="Choose your input drug, type to filter list of drugs" data-ng-model="row.singleSelect" ng-click="setDose(row, row.singleSelect)" data-ng-options="name.dname for name in ourDatas" style="width:300px;" required></select>
                </label>
            </td>
            <td>
                <label for="selectedDose">{{row.dose}}
                    <select class="form-control" popover="Choose dosage amount" data-ng-model="row.selectedDose" ng-options='dose for dose in row.doseOptions' style="width:200px;" required></select>
                </label>
            </td>
            <td>
                <!-- Periods dropdown selection box -->
                <label>{{row.period}}
                    <select class="form-control" popover="Choose how many times a day taken" data-ng-model="row.selectedPeriod" data-ng-options="name for name in periods" style="width:100px;" required></select>
                </label>
            </td>
            <td>
                <input type="button" value="-" class="btn btn-primary" ng-click="removeRow(rowIndex)" />
            </td>
        </tr>
    </table>
</div>

​