Question

我创建了一个包含三行下拉列表的表

药物 - 剂量 - 期限

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

我从数据库中获取数据并在下拉列表中填充

例外：

剂量下降取决于药物的含量。因此，我创建了一个观察者，以检查药物的value何时发生变化，然后创建一个名为$scope.array的剂量数据阵列，并在$scope.selectedDose中填充，这是剂量内的值落下。因此，第一药物剂量数据与第二药物剂量数据不同。 请从jsfiddle的下拉菜单中选择第二种药物和第五种药物，看看剂量值如何变化

$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事件，并将其作为row添加到当前doseArray。

同时改善您的变量＆amp;函数名称，因为没有人知道函数func的作用。好名字将帮助您理解您的代码。

请查看下面的演示或此jsfiddle。

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>

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

1 个答案: