Code Junkie
Code Junkie

Reputation: 7788

angularjs remove from array without knowing index

I have an arraylist which is used to display a leave request workflow. If a vacation leave request is currently saved as a draft, the request is added to my draft list, however if it's been submitted from a modal form to be approved it would need to be removed from the draft list and added to the approval list. My question is the list are external to my form and my form has does not know the index of the list. When I update my request from draft to approve, how do I remove it from the draft list and add it to the approved list without knowing the index.

The first thought that came to mind was to create a unique attribute with the objects database pk like so data-approval="7"and select it with some sort of jquery function and remove the item from the list, but from what I read, that isn't the angular way to do things. So without knowing the index how would I remove an item from my list in angularjs?

Example of loop.

<ul>
    <li ng-repeat="e in pendingApprovals" data-approval="{{e.id}}">
        <div class="alert alert-info">
            <h5>{{e.title}}</h5>
            <div>
            {{e.type}}          
            </div>      
            {{e.start | date:'MM/dd/yyyy - hh:mm a'}}
            {{e.end | date:'MM/dd/yyyy - hh:mm a'}}     
            <a ng-click="rejectClick(e.id)" class="btn btn-danger btn-xs btn-block"> 
                <i class="fa fa-thumbs-down fa-1"></i>
                Reject                                      
            </a>                    
            <a ng-click="approveClick($index, e.id)" class="btn btn-success btn-xs btn-block"> 
                <i class="fa fa-thumbs-up fa-1"></i>
                Approve                                     
            </a>                                    
        </div>
    </li>
</ul>

JS

modalInstance.result.then(function(formData) {
            $http.post('./calendar/save.json', formData).then(
                function(response) {                    
                    if(formData.update) {
                        $scope.refresh();
                        console.log('refresh')
                        angular.element(elem[0].querySelector('[data-unsubmitted="' + response.data.id + '"]')).remove();
                    } else {
                        $scope.events.push(response.data);
                        $scope.pendingApprovals.push(response.data);
                    }                                       
                }, function(response) {
                    console.log('failure ' + response)
                    // called asynchronously if an error
                    // occurs
                    // or server returns response with an
                    // error status.
                });
        }, function() {
            $log.info('Modal dismissed at: ' + new Date());
        });

Upvotes: 1

Views: 1461

Answers (1)

Code Junkie
Code Junkie

Reputation: 7788

It appears as if filters as @ste2425 was in fact the solution.

    modalInstance.result.then(function(formData) {
        $http.post('./calendar/save.json', formData).then(
            function(response) {                    
                if(formData.update) {
                    $scope.refresh();                   

                    var items = $scope.pendingApprovals;                

                    var item = $filter('filter')(items, {id: response.data.id}, true)[0];       

                    var index = items.indexOf(item);        

                    $scope.pendingApprovals.splice(index,1);
                } else {
                    $scope.events.push(response.data);
                    $scope.pendingApprovals.push(response.data);
                }                                       
            }, function(response) {
                console.log('failure ' + response)
                // called asynchronously if an error
                // occurs
                // or server returns response with an
                // error status.
            });
    }, function() {
        $log.info('Modal dismissed at: ' + new Date());
    });

I also found help from this SO question how to get index position of an array item in controller passing a value in angularjs

Upvotes: 3

Related Questions