How can I delete a dom instance in Angularjs view?

Question

I'm making a simple mailer interface and I have a setup that looks like ...

                <tbody ng-controller="sentboxCtrl">
                    <tr ng-repeat="message in sent">
                        <td><input type="checkbox" value="{| message.id |}"></td>        
                        <td><a href="#" value="{| message.id |}" class="view-message-link">{| message['subject'] |}</a></td>
                        <td>

                            <img class="attachement" value="{| message.id |}" ng-if="message.attachment" src="{| attachmentIcon |}" width="20" height="20" alt=""></td>
                        <td>{| message.name |}</td>        
                        <td>{| message.created |}</td>
                        <td><a href="#" value="{| message.id |}" class="flagMessage"><img value="{| message.id |}" src="{| flagIcon |}" width="20" height="20" alt=""></a></td>
                        <td><a href="#" value="{| message.id |}" class="deleteMessage" ng-click="delete({| message |})"><img value="{| message.id |}" src="{| deleteIcon |}" width="20" height="20" alt=""></a></td>
                    </tr>   
                 </tbody>

My code that configures my controller is as follows:

var mailApp = angular.module('mailApp',[]).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{|');
        $interpolateProvider.endSymbol('|}');
    }
);

var sentboxCtrl = function ($scope){

    $scope.sent = initiallySent;
    $scope.deleteIcon = deleteIconSource;
    $scope.flagIcon = flagIconSource;
    $scope.attachmentIcon = attachmentIconSource;

    $scope.delete = function(element)
    {
        delete element;
    }

};

mailApp.controller('sentboxCtrl',sentboxCtrl);

Now since I have an ng-repeat attribute that generates my dom for the messaging platform, I would like to tie in the event ng-click to trigger a delete for that row. An example would be:

<td><a href="#" ng-click="delete(this)" value="{| message.id |}" class="deleteMessage" ng-click="delete({| message |})"><img value="{| message.id |}" src="{| deleteIcon |}" width="20" height="20" alt=""></a></td>

Is it possible to do this without writting too much boiler plate code?

Thanks

If the row is generated from the ng-repeat, you should simply delete the element from $scope.sent. — pasine
– pasine, Commented Oct 15, 2013 at 21:54

lucuma · Accepted Answer · 2013-10-15 22:06:51Z

1

In your controller:

$scope.delete = function(i) {
   $scope.sent.splice(i, 1);
}

HTML

<a href="#" value="{| message.id |}" class="deleteMessage" ng-click="delete($index)"><img value="{| message.id |}" src="{| deleteIcon |}" width="20" height="20" alt=""></a>

answered Oct 15, 2013 at 22:06

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

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

2 Comments

Dr.Knowitall Over a year ago

Thanks! I got the answer on my own to, but this is exactly what I did anyway.

lucuma Over a year ago

That is what's important.

Collectives™ on Stack Overflow

How can I delete a dom instance in Angularjs view?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related