AngularJS-Smart-Table 删除行不会删除选项菜单中的行选择

Question

堆栈，

当用户单击添加和删除它们时，我有一个智能表生成行，当他们单击相关的行删除按钮时。这在大多数情况下是有效的，除了有一个“通用类型”选择框来自动填充一行中的大部分数据，只有当它在表格的最后一行然后被删除时才会被删除。

我制作了一张图片，试图从输出中解释这是如何工作的：

上面数据中的第二行数据去掉后

我不确定解决此问题的问题解决方法，因为从行中删除 wunit 及其数据工作正常。是否有人能够解释如何使用 select 解决问题或为我指出正确的材料方向（总的来说，我仍然是 Web 开发的新手）。

以下是在按下删除按钮时调用的函数的相关代码 sn-ps 和表主体的 html，其中正在操纵模型以生成新行。

        $scope.removeItem = function removeItem(removeID)
        {
            for(var i = 0; i < $scope.wunits.length; i++)
            {
                if($scope.wunits[i].id === removeID.id)
                {
                    $scope.wunits.splice(i, 1);
                    $scope.selectedCommonType.splice(i, 1);
                    break;
                }
            }
        };

        <table class="w3-container w3-red" st-table="displayedCollection" st-safe-src="wunits" class="table table-striped">

            <tbody>
            <tr ng-repeat="wunit in wunits | filter:selected.iwtfReference  track by $index">
                <td>
                    <input ng-model = "wunit.reference" placeholder="{{wunit.reference}}">
                </td>
                <td>
                    <select ng-model="selectedCommonType"
                            ng-options="common.name for common in commonWastes" >
                    </select>
                </td>
                <td>
                    <input ng-if="!selectedCommonType" ng-model="wunit.name">
                    <input ng-model="wunit.name" ng-if="selectedCommonType" placeholder="{{selectedCommonType.name}}">
                </td>
                <td>
                    <input ng-if="!selectedCommonType" ng-model="wunit.description">
                    <input ng-model="wunit.description" ng-if="selectedCommonType" placeholder="{{selectedCommonType.desc}}">
                </td>
                <td>
                    <input ng-model="wunit.quantity">
                </td>
                <td>
                    <input ng-if="!selectedCommonType" ng-model="wunit.weight">
                    <input ng-model="wunit.weight" ng-if="selectedCommonType" placeholder="{{selectedCommonType.weight}}">
                </td>
                <td>
                    <input ng-if="!selectedCommonType" ng-model="wunit.volume">
                    <input ng-model="wunit.volume" ng-if="selectedCommonType" placeholder="{{selectedCommonType.volume}}">
                </td>
                <td class="w3-size w3-tiny">
                    <input ng-if="!selectedCommonType" ng-model="wunit.codes">
                    <input ng-model="wunit.codes" ng-if="selectedCommonType" placeholder="{{selectedCommonType.codes}}">
                </td>
                <td>{{wunit.producer}}</td>
                <td>{{wunit.producerReference}}</td>
                <td>{{wunit.producerSite}}</td>
                <td>
                    <button ng-click="removeItem(wunit)">Remove Record</button>
                </td>
            </tr>
            </tbody>
        </table>

如果您可能需要任何其他相关信息，请告诉我。

康纳

Answer 1

您可以简单地将索引传递给函数并从数组中删除项目

<td>
   <button ng-click="removeItem(wunit,$index)">Remove Record</button>
</td>

你可以尝试重写你的java脚本吗？

$scope.removeItem = function removeItem(removeID,index)
    {
        for(var i = 0; i < $scope.wunits.length; i++)
        {
            if($scope.wunits[i].id === removeID.id)
            {
                $scope.wunits.splice(i, 1);
                $scope.selectedCommonType.splice(index, 1);
                break;
            }
        }
    };

您也从主对象的同一索引中删除。 $scope.selectedCommonType 索引不是 i。 i 是 wunits 的正确索引