Question

我有一个动态添加文本字段的场景，但是如果我点击第二行数据则反映第一行

这是我的HTML代码：

<table class="table table-bordered">
<thead>
    <th>Level</th>
    <th>Select Designation</th>
    <th>Select Names</th>
    <th>Save/Remove</th>
</thead>
<tbody>
    <tr ng-repeat="choice in aChoices track by $index">
        <td>{{choice.levelNo}}</td>
        <td>
            <select ng-model="designation+.$index" class="form-control" ng-change="fnChange(designation+.$index)">
                <option>select designation</option>
                <option ng-repeat="oData in aDesignation">{{oData.designation}}</option>
            </select>
        </td>
        <td>
            <select ng-model="name" class="form-control">
                <option>select name</option>
                <option ng-repeat="oData in aTpNames">{{oData.fullname}}</option>
            </select>
        </td>
        <td>
            <button class="btn btn-success col-xs-5" ng-show="showAddLevel(choice)" ng-click="addLevel(designation, name)"><span class="glyphicon glyphicon-plus"></span></button>
            <button class="btn btn-danger col-xs-5" ng-click="removeLevel()"><span class="glyphicon glyphicon-trash"></span>
            </button>
        </td>
    </tr>
</tbody>

我写了一个如下控制器：

$scope.fnChange = function(designation) {
            jobDescriptionService.fnGetTPNames(designation).then(function(response) {
                $scope.aTpNames = response;
                console.log($scope.aTpNames);
            }, function(response) {

            });
        }
$scope.aChoices = [{
            levelNo: 1
        }];
        $scope.aLevelDetails = [];
        $scope.addLevel = function(designation, name) {debugger;
            var iNewLevel = $scope.aChoices.length + 1;
            $scope.aChoices.push({
                'levelNo':  iNewLevel
            });
            $scope.aLevelDetails.push({
                'level': iNewLevel - 1,
                'designation': designation,
                'name': name
            })
        };
        console.log($scope.aLevelDetails);
        $scope.removeLevel = function() {
            var iNewLevel = $scope.aChoices.length - 1;
            if (iNewLevel !== 0) {
                $scope.aChoices.pop();
            }

        };
        $scope.showAddLevel = function(choice) {
            return choice.levelNo === $scope.aChoices[$scope.aChoices.length - 1].levelNo;
        };

我不明白我哪里错了。

从第一行填充数据后，当我开始填充第二行数据时，第一行数据消失，下拉列表也反映第二行数据。

感谢任何帮助。

Answer 1

问题可能在浅层复制，

 <button class="btn btn-success col-xs-5" ng-show="showAddLevel(choice)" ng-click="addLevel(choice)"><span class="glyphicon glyphicon-plus"></span></button>

$scope.addLevel = function(choice) {
                    debugger;
                    var iNewLevel = $scope.aChoices.length + 1;
                    $scope.aChoices.push({
                        'levelNo':  iNewLevel
                    });
                    var obj = angular.copy(choice);
                    $scope.aLevelDetails.push({
                        'level': iNewLevel - 1,
                        'designation': obj.designation,
                        'name': obj.name
                    })
                };

尝试这个，如果这个deosn工作让我知道

创建动态行

1 个答案: