Question

栈，

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

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

删除上述数据中的第二行数据

我不确定解决问题的方法是什么，因为从行中删除wunits及其数据工作正常。是否有人能够解释如何通过选择解决问题或者指出我正确的材料方向（我仍然是一般的Web开发新手）。

下面是正在按下的删除按钮上调用的函数的相关代码片段以及表的主体的html，其中正在操作模型以生成新行。

＆＃13;

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

＆＃13;

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

＆＃13;

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

康纳

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索引不是我。我是wunits的正确索引

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

1 个答案: