angularjs remove from array without knowing index

Question

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());
        });

When you pass your workflow object into the modal form do you pass the entire object? If so does it not contain some form of unique identifier? Either way you need something to be able to target that specific workflow object. When you have that array.filter will help you filter out that element/s. The filter will allow you to perform logic over the entire object, using any property or properties to determine if it should stay. pendingApprovals = pendingApprovals.filter(x => x.id !== e.id); — ste2425
– ste2425, Commented Feb 9, 2016 at 16:42
I'm opening the modal dialog using the fullcalendar library. My workflow list is external to my calendar. I added some code above to show how I'm adding a unique id to each of my list elements and that id is available to me on my $http.post response. From there I'm lost. I tried something like this but failed. querySelector('[data-unsubmitted="' + response.data.id + '"]')).remove(); — Code Junkie
– Code Junkie, Commented Feb 9, 2016 at 16:47
@ste2425 also, my $scope.pendingApprovals appears to be empty during my response. See sample code above. — Code Junkie
– Code Junkie, Commented Feb 9, 2016 at 16:49
AHHHH Don't manipulate the DOM using jQuery/jQLite like that. angular.element is a jQuery object with a few helpers for getting the current scope etc. You need to manipulate the array it binds with and that will update the DOM. How can it be empty if your pushing to it? I haven't used fullcalendar so can't help much more but the answer lies in using filter on the array to remove the workflow item. — ste2425
– ste2425, Commented Feb 9, 2016 at 16:55
@ste2425 I figured as much which is why I'm here ;) In the update if I try to iterate the scope, I get 0 although there are items on the page. The calendar library just offers me an eventClick method like so $scope.eventClick = function(event, element) { $http.get('./calendar/updateLeaveRequest.json', {params: {leaveRequestId: event.id}}).success(function(data) { data.update = true; $scope.openRequestModal(data); }); }; Once I modify the data and submit it using my form, I get a response back from the post. New entries get the push, the rest update — Code Junkie
– Code Junkie, Commented Feb 9, 2016 at 17:01

Community · Accepted Answer · 2017-05-23 12:22:36Z

3

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

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Feb 9, 2016 at 18:12

Code Junkie

7,80027 gold badges88 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ste2425 Over a year ago

Glad you sorted it. However a more efficient way (sorry to be a pain) would be to filter the $scope.pendingApprovals array directly using JavaScript native filter. Your using angulars filter service there. See fiddle for an example. jsfiddle.net/vegxwpt6 You have access to everything you need, the id for the item to remove and the full list of items you want to remove it from.

Collectives™ on Stack Overflow

angularjs remove from array without knowing index

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related