AngularJS-Smart-Table Deleting row does not delete row's selection in options menu

Question

Stack,

I have a smart table generating rows when the user clicks add and deleting them when they click the relevant row remove button. This, for the most part, works, except there is a "common type" selection box to autofill most of the data in a row which is only being deleted if it is in the final row of the table and then removed.

I have made an image attempting to explain how this works from the output:

Upon removal of the second row of data in the data above

I'm unsure of the problem solving approach to fix this, as the removal of wunits and their data from the row is working fine. Would someone be able to explain how one might go about fixing the issue with select or point me in the right direction for material (I'm still a complete novice to web development in general).

Below are the relevant snippets of code from the function called on the removal button being pressed and the html for the body of the table, where the model is being manipulated to generate new rows.

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

If there is any other relevant information you might need, please let me know.

Connor

ASLAM TP ASLAM TP · Accepted Answer · 2017-07-05T09:14:32

you can simply pass the index to the function and delete the item from array

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

can you try rewriting your java script as this ?

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

your deleting from same index from your main object also. $scope.selectedCommonType index is not i. i is the correct index for wunits

AngularJS-Smart-Table Deleting row does not delete row's selection in options menu

1 Answers